I'm building an app in React Native, aiming to be used on iOS and in the future Android.
To start, I'm trying to build a simple UI: a header at the top (avoiding the notch), a footer at the bottom, and a multiline input that expands to fill however much vertical space is left. I would like the footer to move up when the keyboard is showing, so that it's right above the keyboard.
In terms of components, I have:
<SafeAreaView>
<KeyboardAvoidingView>
<Header />
<View>
<TextInput multiline numberOfLines={#}/>
</View>
<Footer />
</KeyboardAvoidingView>
</SafeAreaView>
I'm having trouble accomplishing the desired UI though. Problems include:
I've tried giving Header and Footer flexGrow of 0 and the middle View a flexGrow of 1, but it doesn't cause the middle View to grow vertically
Ideally I would not have to specify how many lines the multiline TextInput is - the user can just keep typing, and if the contents get super long, that input section will scroll
On the web view, I see the middle View and TextInput, but on my phone (via Expo Go), the middle View and TextInput are always completely collapsed unless I explicitly specify a height or flexBasis on one of the two.
Any pointers on what I'm missing?
Related
Sorry if this has been asked previously, but I hadn't found a working answer.
I'm currently working on a simple app. The main screen features a vertical flatlist with user generated content. The header, though, is transparent and has a predefined height, so the user can see a background image; when the flatlist is scrolled, it covers this background image, which remains static. The goal is to give the user the feeling that they're covering this image, similar to the pull-up element on google maps, which covers the map to show more data.
This would be a simplified example of the current, working code, so you get the gist of it:
const HomeComponent = () => (
<View>
<ImageBackground source={require('../assets/background.png')}>
<Flatlist
headerComponent={<TransparentHeaderOfPredefinedHeight/>}
data={DATA}
renderItem={renderItem}
keyExtractor={item => item}/>
</ImageBackground>
</View> )
Up until here, everything is fine. The thing is, I would like to add a touchable button on this background, that is subsequently covered when the Flatlist is scrolled.
Here's the issue. I have no way to make the touch event propagate through the flatlist's header and reach this button. I tried using pointerEvents='none' and 'box-only' in different combinations, but whenever I was able to touch that button, I was in turn unable to scroll or to interact with the flatlist elements.
I also tried pushing the background image and button on the flatlist header, and using the vertical offsite of the flatlist scrolling to move these elements and simulate the flatlist scrolling over it. Unfortunately, the result was absolutely atrocious, lacking any kind of smoothness.
Does anyone know how I could implement this functionality? I can provide more info if needed. Thank you in advance!
I have a React Native View, that I would like to allow the user to refresh by pulling down, this View contains fixed content that fits on one screen without the need to scroll, and I have used flex to position the elements to utilised the hold screen.
A quick google tells me I need a RefreshControl, but it seems this must be used in conjunction with a ScrollView.
When I try to apply these two controls to my View I get undesired effects:
Scrolls bars that I don't need, although these can be disabled via props
Flex now responds in a different way, the flex items dont expand to the container, which makes sense because its a scrollable container.
Help :)
I would indeed reuse RefreshControl in ScrollView, instead creating a RefreshControl behavior yourself.
As you mentioned, scroll indicators can be hidden by setting the correct props. In addition it is possible to disable scrolling with the scrollEnabled flag.
A ScrollView uses a built-in content container that wraps all the views inside. You can set flex style props for this view as well.
<ScrollView contentContainerStyle={{flex: 1}}>
{/* child views */}
</ScrollView>
I have a TextInput on an Overlay Component in my app. When the keyboard is opened, half the screen gets covered, including the TextInput. I did try the KeyboardAvoidingView component, but couldn't get the TextInput to be fully visible. I need some suggestion on how to move the components inside the Overlay, when the keyboard is enabled in react-native
it wld have been easier to answer if u had posted code, but still
keyboardAvoidview solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its position or bottom padding based on the position of the keyboard
just add this under your largest view
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
all ur ui inside this...
</KeyboardAvoidingView>
There is a prop called keyboardVerticalOffset,
that is the distance between the top of the user screen and the react native view.
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled keyboardVerticalOffset={offsetValue}>
... your UI ...
</KeyboardAvoidingView>;
Value for keyboardVerticalOffset may be non-zero in some use cases. but for your case try to add some value.
If you want to know more about handling keyboard in react native check this
I have this particular component above a Flatlist which renders my cards, and I want to make them both scrollable. I tried to nest them with a ScrollView:
<ScrollView>
<MainImage/>
<FlatList />
</ScrollView>
It works but my flatlist lost its ability to constrain memory, since I have a lot of data to render the app lags till crash.
If remove the ScrollView from my MainImage component it gets stuck on the screen and the cards scrolls behind it which is not cool.
<View>
<MainImage/>
<FlatList/>
</View>
How do I do to both components be able to scroll without losing performance?
obs: I'm using version 0.55 of react native
You can also use collapsible navbar above the flatlist rather than using separate MainImage Component. People are doing that and example is given in this link (https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a)
How can I get the actual screen height when virtual keyboard shows up? I need to readjust the view height dynamically when keyboard is active and in-active.
<View style={styles.container}>
<TextInput
autoFocus={true}>
/>
<View style={styles.content}></View>
<View>
When the keyboard is present and dismissed how can I calculate the active screen height,
content:{ height: ?}
Use this KeyboardAwareScrollView instead of KeyboardAvoidingView
keyboard avoiding view doesn’t quite work with the last element, and setting padding/margin didn’t work. So you have to add a new element to bump everything up a few pixels.
Try with KeyboardAwareScrollView which makes the scrolling interaction pretty seamless and gives a lots of other benefits like resetScrollToCoords and manage height calculation by its end.
KeyboardAvoidingView
It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its position or bottom padding based on the position of the keyboard.
SOURCE:
https://facebook.github.io/react-native/docs/keyboardavoidingview.html#relativekeyboardheight