react native scroll view component not scrolling

Question

I'm using scrollview to perform vertical scroll when height of the content gets over the height of screen but the the scroll keeping show and hide(it's shaking) through minimize screen vertically on web ,and when I stop minimizing screen it never shows or scrolls I tried to kill app and restart metro but it dosen't work

SignUpScreen.tsx

...
return (
    <View style={[styles.mobileContainer,styles.mobileScreen,]} > //flex:1
      <ScrollView contentContainerStyle={{flex:1}} //flex:1
        style={GlobalStyle.formContainer}
        >
        <View >  //wrapper of the whole content
          <View style={styles.signupImage}>
            <Image source={images.Signup} style={styles.image} />
          </View>
          <Title title={'sign up'} style={{marginBottom:SIZES.xLarge}} />  
          
          <View style={styles.inputContainer}>
            <Controller
              name="fullName"
              control={control}
              render={({ field: { onChange, onBlur, value, ref } }) =>  
                <PaperInput
                  readOnly={false}
                  returnKeyType={"next"}
                  isValid={value===''?false:errors.fullName?false:true}
                  rightIcon={value!==undefined&&errors.fullName===null
                    ?<True width={SIZES.medium} height={SIZES.medium} />
                    : undefined}
                  leftIcon={<Name color={COLORS.gray} width={SIZES.medium} height={SIZES.medium} 
                   />}
                  //style={styles.form_input}
                  placeholder={'full name'}
                  onChangeText={(value: any) => onChange(value) }
                  value={value}
                  
                />

              }
            />
            <ErrorMessage errors={errors} name={'fullName'}  render={({ message }) => 
                <Error message={message} />} />
          </View>
          //....rest of my controlled input 

          <View style={styles.inputContainer}>
            {<PrimaryButton value={signupButtonText} 
                disabled ={false} onPress={handleSubmit(onSubmit)}
                icon={signupButtonText=== 'signing up...'
                ?<ActivityIndicator size={SIZES.medium} color={COLORS.white}
                  style={{ marginRight:SIZES.medium}} />
                :undefined
                }
            />}
          </View>
          <View style={styles.navigate}>
            <Text style={TextStyle.navigateText}></Text>
          </View>
        </View>
      </ScrollView>
    </View>
  )
}

export default SignUpScreen

styles.ts

export const styles = StyleSheet.create({

 mobileContainer: { 
      flex:1,
      //height:'100%',
      flexWrap: 'nowrap',
      paddingVertical:SIZES.xSmall,
      paddingHorizontal:SIZES.medium,
      backgroundColor: COLORS.white,
      justifyContent:'flex-start',
      alignItems:'center',
      },

 formContainer:{
        flex:1,
        width:'90%',
        maxWidth:300,
},
inputContainer:{
   flex:1,
   marginBottom:SIZES.large ,
  },
signupImage:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',
    marginBottom:42,
  //  marginTop:SIZES.large

  },
  image:{
     width:250,
     height:160,
     
  },
    })

Answer 1

I figured it out ,just set maxHeight to the screen height for the parent View like that :

maxHeight:Dimensions.height