React Native scrollview not working in android

Viewed 941

I am using a ScrollView in my react-native app. The App work fine in my iOS simulator but when I test in my Android emulator the ScrollView does not work.

Here is what my React Components returns

  <SafeAreaView style={styles.container}>
    <Image
      source={require('../assets/images/logo.png')}
      style={styles.logo}
    />
    <Androw style={styles.shadow}>
      <Text style={[styles.logoText, styles.shadow]}>{NAME}</Text>
    </Androw>
    <Text style={styles.title}>Welcome Back</Text>
    <View style={styles.subContainer}>
      <ScrollView showsVerticalScrollIndicator={false}>
        <Text style={styles.loginText}>Login</Text>

        <View style={styles.textBox}>
          <Input
            // icon="email"
            placeholder="Email or username"
            autoCapitalize="none"
            autoCompleteType="email"
            value={this.state.email}
            onChangeText={(txt) => this.setState({email: txt})}
          />
          <View style={styles.textInput}>
            <Input
              // icon="pass"
              placeholder="Password"
              autoCapitalize="none"
              autoCompleteType="password"
              value={this.state.password}
              onChangeText={(txt) => this.setState({password: txt})}
            />
          </View>
        </View>
        <TouchableOpacity>
          <Text style={styles.forgotPasswordText}>
            Don't remember your password?
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.button}
          onPress={() => console.log(this.state)}>
          <Button text="Login" />
        </TouchableOpacity>

        <Text style={styles.noAccountText}>
          Don't have an account?{' '}
          <Text style={styles.signupText}>Signup</Text>
        </Text>
      </ScrollView>
    </View>
  </SafeAreaView>
2 Answers

you should wrap your child views inside like

<ScrollView>
  <View>
   .....
  </View>
</ScrollView>

Top <View> must have style flex:1. Alternate try doing like this

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
    ...
</ScrollView>

SafeAreaView that does not require flex: 1. Also try removing it from ScrollView too if it is there.

This is what i assume. Would be more helpful if you share your stylesheet also.

Related