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!