react native app has different style in ios and android

Question

The same code results in different styles in ios and android. The android version is the one that it should look like, but the same in ios looks totally destroyed.

This app is already developed but never run on ios, probably they did not need that. but now it should be released for ios too. How can I achieve the same result with the least amount of refactoring?

the input field code for fullname;

     <View style={inputFieldContainerStyle}>
        <Icon source={usernameIcon} />
        <TextInput
          style={[inputFieldStyle, textInputTextStyle]}
          onChangeText={(text) => this.setState({name: text})}
          accessibilityLabel="name"
          editable={true}
          value={this.state.name}
          placeholder={'First and last name'}
          placeholderTextColor="grey"
          autoCorrect={false}
          label="field1"
          ref={(input) => {
            this.inputs.field1 = input;
          }}
          returnKeyType={'next'}
          onSubmitEditing={() => {
            this.focusTheField('field2');
          }}
          textContentType="name"
        />
      </View>
inputFieldContainerStyle: {
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
  marginBottom: 15,
  height: 40,
},
inputFieldStyle: {
  backgroundColor: 'white',
  flex: 1,
  paddingLeft: 10,
  paddingRight: 10,
},
textInputTextStyle:{
  color: 'black',
  fontSize: 16,
  fontFamily: 'HelveticaNeue',
}
// THE Icon COMPONENT
<View style={[containerStyle, secondaryContainerStyle && secondaryContainerStyle]}>
  <Image source={source} style={[iconStyle, secondaryIconStyle && secondaryIconStyle]} />
</View>

Hi `Amir Mousavi`, do you have solution for solve the problem? My app (0.64) works fine on android and has exactly the same problem on ios. — user938363, Jul 27 '21 at 23:46

score 0 · Answer 1 · answered Jun 23 '20 at 13:07

You can put some conditional styling like this:

textInputTextStyle:{
  color: 'black',
  fontSize: 16,
  fontFamily: 'HelveticaNeue',
  padding: Platform.os === 'ios'? 10: null
}

I'm not sure about the padding but this is just to give an example for styling depending on platform.

react native app has different style in ios and android

1 Answers1