How to use Platform.OS to elements in react native?

Question

I want to use just KeyboardAwareScrollView without any functions on IOS and given below code for android.

I know that I need to use Platform.OS === 'ios' ? :

BUT I DON'T UNDERSTAND HOW TO REALISE IT. Please help me

render(){
 return(

    <KeyboardAwareScrollView
       extraScrollHeight={100}
       enableOnAndroid={true}
       keyboardShouldPersistTaps='handled'
    >
      <TextInput
        style={styles.inputContainerStyle}
        label="Username"
        value={this.state.username}
        onChangeText={username => this.setState({ username })}
      />
    </KeyboardAwareScrollView>
   )
}

What I've tried below: (But it doesn't work)

<KeyboardAwareScrollView
      Platform.OS === 'android' ? 
      (
         extraScrollHeight={100}
         enableOnAndroid={true}
         keyboardShouldPersistTaps='handled'
      ) : null
  >

You can get your answer here [in this question](https://stackoverflow.com/questions/32232659/react-inline-conditionally-pass-prop-to-component) — kamran, Jul 20 '18 at 07:15

score 40 · Answer 1 · answered Oct 17 '18 at 16:35

You can also check via node but react-native provides some ways to check platform.

This one is recommended

 import {Platform} from 'react-native';
    st styles = StyleSheet.create({
      container: {
        flex: 1,
        ...Platform.select({
          ios: {
            backgroundColor: 'red',
          },
          android: {
            backgroundColor: 'blue',
          },
        }),
      },
    });

You can also use ternary expressions

 import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100,
});

Read this

score 12 · Answer 2 · answered Jul 20 '18 at 07:11

12

You can use JSX prop spread and a ternary expression at the same time:

<KeyboardAwareScrollView
  {
    ...(Platform.OS === 'android' ? 
    { 
      extraScrollHeight={100}
      enableOnAndroid={true}
      keyboardShouldPersistTaps='handled'
    } : {})
  }
>

I highly recommend against doing this all inline though, since it's hard to read. You could do something a bit readable (and declarative) using Platform.select:

const keyboardProps = Platform.select({
  android: { … },
  ios: {},
});
…
<KeyboardAwareScrollView {...keyboardProps}>

answered Jul 20 '18 at 07:11

Andrew Li

55,805
14
125
143

Where I should add **const keyboardProps** ? before class declared? inside class? or inside return statement? – Just Ahead Jul 20 '18 at 07:43
first code can't read height 100, https://snack.expo.io/Hkd-9MkEQ, you can check here – Just Ahead Jul 20 '18 at 08:15
@JustAhead You need to add the opening tag. – Andrew Li Jul 20 '18 at 14:59

Srishruthik Alle · Answer 3 · 2020-09-11T19:36:32.143

If you want to keep your code much simpler and cleaner to understand, do this: For example, if you want to specific "marginTop" per specific operating System. You can do this:

 <View style={{justifyContent:'center',marginTop:Platform.select({
            ios: '30%', //30 percent of margin is applied to IOS
            android:'10%', // 30 percent of margin is applied to Andriod

          })}}>

Go to this website by React-native: https://reactnative.dev/docs/platform-specific-code for more information.

score 3 · Answer 4 · answered Sep 11 '20 at 04:29

Try this one,

renderKeyboardAwareScrollView(){
  if(Platform.OS === 'ios'){
    return (
       <KeyboardAwareScrollView
       extraScrollHeight={100}
       enableOnAndroid={true}
       keyboardShouldPersistTaps='handled'
    >
      <TextInput
        style={styles.inputContainerStyle}
        label="Username"
        value={this.state.username}
        onChangeText={username => this.setState({ username })}
      />
    </KeyboardAwareScrollView>
    )
  } else {
    return (
      <TextInput
        style={styles.inputContainerStyle}
        label="Username"
        value={this.state.username}
        onChangeText={username => this.setState({ username })}
      />
    )
  }
}
render(){
 return(
  {this.renderKeyboardAwareScrollView()}
 )
}

score 2 · Answer 5 · answered Feb 27 '20 at 08:31

This syntax works for me:

 keyboardProps = Platform.select({
    android: {
      enabled: true,
      keyboardVerticalOffset: 0
    },
    ios: {
      enabled: true,
      keyboardVerticalOffset: 64,
      behavior: 'height',
    },
  });

  render = () => (

    <KeyboardAvoidingView 
      {...this.keyboardProps}
    >

flix · Answer 6 · 2018-07-20T15:50:14.227

1

use bracket {} for Ternary Condition inside return ()

so your code looks like :

render(){
 return(
 <View>
 { ...Platform.OS === 'android' 
    ? //if true
    <KeyboardAwareScrollView
       extraScrollHeight={100}
       enableOnAndroid={true}
       keyboardShouldPersistTaps='handled'
    />
    : //if false
    <KeyboardAwareScrollView
      //your props for else condition
    />
    // or add null if you don't want to add another
 }
      <TextInput
        style={styles.inputContainerStyle}
        label="Username"
        value={this.state.username}
        onChangeText={username => this.setState({ username })}
      />
  </View>
   )
}

EDITED:

add spread notation(...) to make it work at Platform.OS

Prove:

edited Jul 20 '18 at 15:50

answered Jul 20 '18 at 07:13

flix

1,688
3
34
64

can you check, please, it says unterminated JSX contents https://snack.expo.io/HJWSdM1NQ – Just Ahead Jul 20 '18 at 08:08
@JustAhead if you dont need to handle the iOS `KeyboardAwareScrollView` just use `null` https://snack.expo.io/Bked2KMkNQ – flix Jul 20 '18 at 08:13
@JustAhead here's a [fixing](https://snack.expo.io/HkoFiMJE7), you cant put the `closed tag` of component outside `{}` – flix Jul 20 '18 at 08:22
@flix Huh, you're right, it does work. Seems like Babel is cloning the element, but it's incredibly hard to read IMO. But your first example doesn't work. You can't have adjacent tags after the ternary, Babel cannot parse it. – Andrew Li Jul 20 '18 at 14:55
@Li357 I'm not aware of the code, i just add my code from existing code, but you're right, the 3rd line from bottom (``) should be deleted to make it work, – flix Jul 20 '18 at 15:39
The text input right after is also invalid syntax. You'd have to wrap them in a container, or use keys/fragments. – Andrew Li Jul 20 '18 at 15:45
@Li357 again, i'm too lazy to test the code, now i think i'm done to edit the answer – flix Jul 20 '18 at 15:51
This will not work with nested components cos the top level should be closed – Ismail Iqbal Dec 22 '19 at 06:07

score 0 · Answer 7 · answered Aug 06 '19 at 05:04

In order to add keyboard awareness to iOS part of react native app just add

  pod 'IQKeyboardManager'

in podfile and run pod install inside ios folder. It will enable IQkeyboard in your iOS app and will save you from hasle.

Gotcha: You might have to re add the pod file if some how your ios project is reset.

How to use Platform.OS to elements in react native?

7 Answers7

Linked