KeyboardAwareScrollView

Used to avoid keyboard to hide text input (GitHub)

Disable scrollview bounce (elastic effect)

<ScrollView ... bounces={false}>

Background Image

<ImageBackground style={localStyles.backgroundImage} source={require('@assets/login/loginBackground.png')} imageStyle={{resizeMode: 'cover'}}>
  ...
</ImageBackground>

Text input useful props

<TextInput
  ...
  ref={(passwordField) => this.passwordField = passwordField} //reference
  autofocus={true} //focuses the input on componentDidMount
  maxLength={40} //max length
  autoCorrect={false} // disable auto-correct
  autoCapitalize='none' //disable auto-capitalize
  returnKeyType='next' //keyboard return key
  placeholder={StringsConstant.LOGIN.USERNAME_INPUT_PLACEHOLDER} //placeholder
  value={username} onChangeText={username => updateCredentials(username, password)} //redux stuff
  onSubmitEditing={() => this.passwordField.focus()} //return key action
  onSubmitEditing={() => {
      if(shouldLoginButtonBeActive) {
          this.props.goToScene("yourRound");
      }
  }}
  underlineColorAndroid={'transparent'} //android style fix
  ...
/>

Android TextInput style fix

<TextInput
  ...
  underlineColorAndroid={'transparent'} //android style fix
  ...
/>

Use of buttons

<TouchableOpacity 
  ...
  onPress={() => { this.props.goToScene("yourRound") }}
  style=...
  disabled={!username || !password}
  ...
>
    <Text style=...>{StringsConstant.LOGIN.CONNECT_BUTTON_TEXT}</Text>
</TouchableOpacity>

Conditional styling

<MyComponent>
  style={[localStyles.startButton /*default style*/, shouldLoginButtonBeActive /*statement*/ ? localStyles.startButtonEnabled /*if true*/: localStyles.startButtonDisabled /*else*/]}
</MyComponent>

Display only if val exists

{myVar && <myComponent>{myVar}</myComponent>}
// OR
{/*myStatement (func, var...)*/ && <myComponent>{myVar}</myComponent>}

FlatList

<FlatList
    data={myObject.myVars}
    keyExtractor={myVar=>`${myVar.uniqueVar}`}
    renderItem={(myVar)=><MyCell myProps={myVar.item}></MyCell>}
/>

FlatList empty state

{myObject.myFlatListObjects && myObject.myFlatListObjects.length > 0 && <FlatList ... />}
{myObject.myFlatListObjects && myObject.myFlatListObjects.length == 0 && <Text>{myEmptyMessage}</Text>}

String builder helper

  buildAddressString(args) {
    let builtString = "";
  
    if (args instanceof Array) {
        args.forEach(function(element, idx, array) {
            if (idx === array.length - 1){
                builtString += element || "";
            } else {
                builtString += element ? element + " " : "";
            }
        });
    }
  
    return builtString;
  }

JS enums (in external files)

export default Alias = {
    StatusEnum: {
        TODO: 0,
        DOING: 1,
        DONE: 2,
    },
    StatusMap: {
        0: StringConstants.YOUR_ROUND.STATUS_TODO,
        1: StringConstants.YOUR_ROUND.STATUS_DOING,
        2: StringConstants.YOUR_ROUND.STATUS_DONE
    }
}