Xtykutl

React Native - KeyboardAvoidingView Problems

This is what I want:

Here is what I'm having currently

Link to my snack if I can get any help : https://snack.expo.io/@dhavaljardosh/keyboardavoidingview

Here is my Code please let me know what do I need to change

<View style={{ marginTop: 24 }}>

  <View>

    <Header title="Create Event" prop={details} route="Profile" />

  </View>



  <View>

    <View style={styles.topBlock}>

      <View style={{ display: "flex", flexDirection: "row" }}>

        <Image />

        <Text style={{ marginLeft: 10, fontSize: 16, fontWeight: "bold" }}>

          {firstName} {lastName}

        </Text>

      </View>

      <View>

        <TouchableWithoutFeedback>

          <View style={styles.publicButton}>

            <Image />

            <Text>Public</Text>

          </View>

        </TouchableWithoutFeedback>

      </View>

    </View>

    <ScrollView>

      <KeyboardAvoidingView behaviour={"padding"} enabled style={{

                    flex: 1,

                    marginLeft: 10,

                    marginRight: 10

                  }}>

        <View style={{

                      borderColor: "black",

                      borderWidth: 0.4,

                      borderRadius: 5,

                      marginTop: 10,

                      marginBottom: 10

                    }}>

          <Picker style={{ height: 40, width: "100%", borderColor: "black" }} onValueChange={(itemValue, itemIndex)=>

            this.setState({ games: itemValue })

            }

            >

            //There are items not listed here

          </Picker>

        </View>

        <View style={{

                      display: "flex",

                      flexDirection: "row",

                      height: 40,

                      justifyContent: "center",

                      marginBottom: 10

                    }}>

          <View style={{

                        width: "60%",

                        borderColor: "black",

                        borderWidth: 0.4,

                        borderRadius: 5,

                        marginRight: 10

                      }}>

            <Picker style={{ borderColor: "black", height: "100%" }} onValueChange={(itemValue, itemIndex)=>

              this.setState({ games: itemValue })

              }

              >

              //Items not listed here

            </Picker>

          </View>

          <View style={{ flex: 1 }}>

            <TouchableOpacity style={{

                          flex: 1,

                          display: "flex",

                          alignItems: "center",

                          justifyContent: "center",

                          height: 35,

                          backgroundColor: "royalblue",

                          borderRadius: 7,

                          elevation: 3

                        }}>

              <Text style={{ color: "white" }}>Create List</Text>

            </TouchableOpacity>

          </View>

        </View>

        <View style={{ marginBottom: 10 }}>

          <TextInput placeholder="Opponent Team Name" style={{

                        borderColor: "black",

                        borderWidth: 0.4,

                        borderRadius: 5,

                        height: 40,

                        paddingLeft: 5,

                        color: "black"

                      }} underlineColorAndroid="transparent" />

        </View>

        <View style={{ height: 40, marginBottom:10 }}>

          <DatePicker />

        </View>

        <View>

          <GooglePlacesAutocomplete />

        </View>

        <View style={{ marginBottom: 10 }}>

          <TextInput />

        </View>

        <View style={{ marginBottom: 10 }}>

          <TextInput />

        </View>

      </KeyboardAvoidingView>

    </ScrollView>

  </View>

</View>

Even was searching for "Keyboard Aware Scroll View" and also a really good article on Avoiding Keyboard View, but wasn't able to understand it totally.

Any help is appreciated.