score:6
i solved this problem by using another lib. not sure why the react-native-keyboard-aware-scroll-view doesn't work but if you implement the react-native-keyboard-aware-view you shouldn't have any problems.
https://www.npmjs.com/package/react-native-keyboard-aware-view
score:0
give parent view height like this
height:dimensions.get('window').height
with flex:1
it will wrap up the contents.
score:0
just add the resetscrolltocoords, contentcontainerstyle ( the stylesheet doesn't need to be named container ) and scrollenabled ( you can set it to true i find it more useful like this ). it's going to work properly and fit well !
import react from 'react';
import { view, textinput, image } from 'react-native';
import { keyboardawarescrollview } from 'react-native-keyboard-aware-scroll-view'
import styles from './styles';
import logo from './logo.png';
const demo = () => {
return (
<keyboardawarescrollview
style={{ }}
resetscrolltocoords={{ x: 0, y: 0 }}
contentcontainerstyle={styles.container}
scrollenabled={false}
>
<image source={logo} style={styles.logo} />
<textinput
placeholder="email"
style={styles.input}
/>
<textinput
placeholder="username"
style={styles.input}
/>
<textinput
placeholder="password"
style={styles.input}
/>
<textinput
placeholder="confirm password"
style={styles.input}
/>
</keyboardawarescrollview>
);
};
let styles = stylesheet.create({
container: {
flex: 1,
flexdirection: "column"
},
}),
export default demo;
score:0
with this it works. also make sure that you have added the other necessary configuration as mentioned in the package.
_scrolltoinput = (reactnode: any) => {
this.scroll._internalfiberinstancehandledev.memoizedprops.scrolltofocusedinput(
reactnode,
);
};
score:1
i upgrade react-native version to 0.59.4 and the keyboardawarescrollview stop working as usual. apparently this props are now mandatory:
<keyboardawarescrollview
scrollenabled={true}
enableautomaticscroll={true}>
score:2
you can also use animated view as scroll view cannot have absolute views or fixed components. so listening to the keyboard event and making the adjustment would work fine.
onkeyboardidshow(e) {
//layoutanimation.configurenext(layoutanimation.presets.easeineaseout)
animated.timing(this.relativebottom, {
duration: e.duration,
tovalue: dimensions.get('window').height-em(64)-e.endcoordinates.height
}).start()
}
onkeyboardwillhide(e) {
//layoutanimation.configurenext(layoutanimation.presets.easeineaseout)
animated.timing(this.relativebottom, {
duration: e.duration,
tovalue: dimensions.get('window').height-em(64)
}).start()
}
componentwillmount() {
this._didshowlistener = keyboard.addlistener('keyboardwillshow', this.onkeyboardidshow.bind(this));
this._willhidelistener = keyboard.addlistener('keyboardwillhide', this.onkeyboardwillhide.bind(this));
}
componentwillunmount() {
this._didshowlistener.remove();
this._willhidelistener.remove();
}
score:2
settings that worked for me
bounces={false}
showsverticalscrollindicator={false}
style={{marginbottom:150}}
enableonandroid={true}
scrollenabled={true}
extrascrollheight={100}
keyboardshouldpersisttaps='handled'
scrolltooverflowenabled={true}
enableautomaticscroll={true}
score:3
if anyone is still struggling with this issue.
what worked for me was ensuring enableonandroid = true
and setting a marginbottom
inside the keyboardawarescrollview.
<keyboardawarescrollview style={{width: "90%",marginbottom:150}} enableonandroid={true}>
score:7
to make it working in android with expo i had to add a few more things, hope this will help
<keyboardawarescrollview extrascrollheight={100} enableonandroid={true}
keyboardshouldpersisttaps='handled'>
<scrollview>
</scrollview>
</keyboardawarescrollview>
score:16
personally solved this by using flex...
<keyboardawarescrollview contentcontainerstyle={{flex: 1}}>
<view style={{flex: 1}}>
Source: stackoverflow.com
Related Query
- Scroll View inside view not working react native
- React native asyncstorage not working properly
- React Native View and Flex: 1 not working as expected
- onclick function is not working in react native application
- React native textDecoration properties not working on Android
- TouchableOpacity and button not working in react native Modal?
- React native vector icon not working on current version 0.60
- Custom font not working in React Native
- React Native Image Not Working with specific URL
- React Native Text color not working
- React Native FlatList horizontal mode not working at all
- Paste from clipboard not working with React Native on iOS simulator
- React Native 0.60.3 babel-plugin-transform-remove-console not working
- <TextInput keyboardType="numeric"/> is not working in react native
- Marker click event on react native maps not working in react ios
- Nested Text, Vertical Align not working - React Native
- uri image is not rendering in React native Image view
- flexWrap not working for <Text> element in React Native
- React Native lazy loading 250 images in a Scroll View
- Keydown/up events with React Hooks not working properly
- React Native Modal Transparent Not Working
- React Native ScrollView scrollTo function is not working
- react native button style not working
- React-Native button press after textInput in Keyboard aware scroll view
- React Native "onViewableItemsChanged" not working while scrolling on dynamic data
- React Native svg clip path on image not working
- React Native localeCompare not working on Android
- Alert prompt to function not working in react native
- React router goBack() not working properly
- translate on Y using SectionList and header view creating empty space on scroll - react native
More Query from same tag
- Hydration error due to if statement in Next.js
- Can't edit the text using the React AceEditor
- Where are lifecycle methods defined in React's source code?
- re-render GoogleMapReact
- How can I get the onDownloadProgress percentage with axios get method?
- SSR with Lerna + React + Styled components
- useEffect and 'react-hooks/exhaustive-deps' linting
- onClick function only works for the first time in react?
- Why does using `<button>` as a delegate for `<input type="file">` not work, but `<a>` works in Safari?
- Error, when trying to change state with useState - Identifier expected. 'true' is a reserved word that cannot be used here.ts(1359)
- What does it mean when they say React is XSS protected?
- Update React-D3-Graph ViewBox
- Implementation of two for loops in React Js to create a 3X3 square marix box for tic-tac-toe
- ESLint: TopBarClass not found in './TopBar'(import/named)
- drag and drop feature in react
- Using Tag to pass a attribute inside NavLink reactstrap component
- React state created with useState doesn't update automatically when my API changes
- How to use React Native launch options parameter for RCTRootView
- React Hook Form Error - Type 'UseFormRegister<FormData>' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'
- Recursively generated component doesn't receive auth props, as all other components do?
- Jest: How can I use dynamic environment variable?
- Trying to get props from map() ES6 and pass to other component
- Advantages of functional component in React? And why the react team suggest it's the feature of react components?
- ReactJS element doesn't reload after state change
- How to translate numbers to other languages using interpolation method format
- Query collection with array of values from another collection - MongoDB
- I used ityped-npm library and i18next translator. The problem is, I can’t translate the inside of the array. How do I translate words in an array?
- Render reactdom on dynamic ids (React JS)
- change reducer state from other reducer
- ReactJS when using if-rendering there is component that disappears