Component changes location after apk build / using expo qr code

#1

Hey,

I am having trouble solving this issue.
I built a simple UI and I am trying to set inside a view two components
that one will take the left side and the other the right side.
I managed to make it work and it seems fine on the android emulator and on genymotion emulator
but when I use the qr scanner / build the apk the text and the inputs changes places:
before and after:

this is my code:

import React from 'react';
import { StyleSheet, Text, View ,SafeAreaView,StatusBar,Image,TextInput,Picker} from 'react-native';
import {Button} from 'react-native-elements';
import RadioForm from 'react-native-simple-radio-button';
 
var radio_props = [
  {label: 'Yes', value: true },
  {label: 'No', value: false }
];

export default class App extends React.Component {
  state = {
    value: false,
    text: '',
    language: "10"
  }

  flipSwitch = () =>{
    this.setState({switch: !this.state.switch})
    console.log(this.state.switch)
  }
  

  render() {
    return (
      
      <SafeAreaView style={{flex: 1, backgroundColor: '#101010'}}><StatusBar hidden={true} />
      
          <Image source={require("./assets/logo.jpg")} style={{height:133, width: undefined}} resizeMode="cover"/>
          
          <Button title="Practice Assosiations" 
                    buttonStyle={{backgroundColor:"#f04d01",marginTop:40}}/>
            <Button title="Practice Random" 
                    buttonStyle={{backgroundColor:"#f04d01",marginTop:15,marginBottom:45}}/>

          <View style={styles.container}>
      
            <Text style={{color:"white",fontSize:20,marginBottom:40}}>Time Games</Text>
            <View style={{flexDirection:'row',justifyContent:"space-between",backgroundColor:"gray",width:300}}>
                <Text style={{color:"white",marginTop:5,backgroundColor:"blue"}}>Enable Time: </Text>
                <RadioForm radio_props={radio_props} 
                          initial={1}
                          buttonColor={'#f04d01'}
                          style={{backgroundColor:"red"}}
                          selectedButtonColor={'#f04d01'}
                          onPress={(value) => {this.setState({value:value})}}
                          formHorizontal={true}
                          labelHorizontal={true}
                          animation={true}
                          labelStyle={{color:"white",marginRight:10}}
                          />
            </View>
            <View style={{height:15,width:40}}></View>
            <View style={{flexDirection:"row"}}>
                <Text style={{color:"white",marginTop:5,marginRight: 53}}>Number Length:</Text>
                <TextInput
                style={{height: 30, width: 140,backgroundColor:"white"}}
                onChangeText={(text) => this.setState({text})} keyboardType="numeric" underlineColorAndroid="white"
                value={this.state.text}
              />
            </View>
            <View style={{height:15,width:40}}></View>
            <View style={{flexDirection:"row"}}>
                <Text style={{color:"white",marginTop:5,marginRight: 15}}>Time Between Images:</Text>
                <Picker
                selectedValue={this.state.language}
                style={{ height: 30, width: 140 ,backgroundColor:"white"}}
                onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
                    <Picker.Item label="15" value="15" />
                    <Picker.Item label="10" value="10" />
                    <Picker.Item label="7" value="7" />
                    <Picker.Item label="5" value="5" />
               </Picker> 
            </View>
            <View style={{height:15,width:40}}></View>
            <Button title="GO" containerViewStyle={{width: '73%', }}/>
          </View>
      </SafeAreaView>
    );
  }
}



const styles = StyleSheet.create({
  container: {
    flex:1,
    alignItems: 'center'
  },
  logo: {
    fontFamily:"Roboto",
    fontWeight: "bold",
    fontSize:50,
    color: "white"
  },
  slogan: {
    fontFamily:"Roboto",
    fontWeight: "bold",
    fontSize:20,
    color: "white"
  }
});

Thanks for the Help!

closed #2

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.