The problems statement is similar to this question
But I am looking for some pointers to implement the same with react-native.
I am building a chat window (like iMessage, whatsapp) where messages(ListView) come on top with a sticky footer containing a TextInput.
I am able to get a sticky footer, but when someone tries to enter text with TextInput in footer, the keyboard hides the TextInput. I tried approaches mentioned in this post, but none seem to work because of presence of ListView above.
Here is what my current layout code looks like:
<View style={styles.container}>
<ListView
automaticallyAdjustContentInsets={false}
keyboardDismissMode="on-drag"
keyboardShouldPersistTaps={true}
showsVerticalScrollIndicator={false}
/>
<View style={styles.textContainer}>
<TextInput/>
</View>
</View>
Related
I have used React with MUI and starting to explore React Native. I have read the documentation but can not seem to find this basic example.
How do I create a list of buttons(button group) with icons to the right?
I would like to do something similar to MUI like <Button endIcon={<ArrowRight />} />
but achieve the Native iOS look and feel.
Like the Settings app on iOS:
| General —-——————————————- —> |
| Control Center —————————- —> |
| Display & Brightness ———— —> |
Is there a way to do this without coding the entire thing from scratch?
There is probably a third party package for this somwhere, but my advice would be to use SectionList from react-native and RectButton from react-native-gesture-handler to get the native ios/android feel.
You can use FlatList with custom buttons and apply styles to it.
https://reactnative.dev/docs/flatlist
Example of button content:
<View style={{flexDirection: 'row'}}>
<View style={{flex: 0.3}}>Icon here</View>
<View style={{flex: 0.5}}><Text>Text here</Text></View>
<View style={{flex: 0.2, alignItems: 'flex-end'}}>Icon here</View>
</View>
I've got a react native app -> I've currently noticed that the text on my screen overlaps on iphone 10+ devices. How would I create a safearea for the new devices?
I've tried to add a tag to wrap my stack.navigator for the home screen but had no luck so far.
Is this something I would target on my react native or in xcode?
enter image description here
use
import { SafeAreaView } from 'react-native';
to handle safe area I have shown in below code how to handle safe area for iPhone 10 plus device
in below code I have divided the safe area in two-part one is for top safe area and another is the bottom safe area and you place your all component in bottom safe area
render() {
return (
<View style={{flex: 1} >
<SafeAreaView style={{flex: 0}} />
<SafeAreaView style={{flex: 1}}>
//here you can place your component
</SafeAreaView>
</View>
)
}
Any idea why ScrollView + multiline TextInput + KeyboardAvoidingView feels really sluggish? I'm using react-navigation with the react-native-screen for the native modal look. The screenshot gif below is taken on emulator but it behave similarly even on the real device (notice that there is a flash of blue background just before keyboard showed up)
My code looks something like (I set the KeyboardAvoidingView background to pink so it's easy to spot and ScrollView background is set to blue
<KeyboardAvoidingView behavior={'padding'} style={{flex: 1, backgroundColor: 'pink'}} keyboardVerticalOffset={48}>
<View style={{flex: 1}}>
<View style={styles.header}>
<Text>{date}</Text>
<Button title="Delete"/>
<Button title="Save"/>
</View>
<ScrollView keyboardDismissMode={'interactive'} style={{flex:1, backgroundColor: 'blue'}}>
<TextInput onChangeText={(text) => setNote(text)}
placeholder='Note'
value={note}
multiline={true}
scrollEnabled={false}
style={{flex: 1, backgroundColor: '#fff'}}
/>
</ScrollView>
</View>
</KeyboardAvoidingView>
I'm also using react-native-elements, react-navigation+react-native-screens for the native modal look
PS - I tried not using ScrollView and simply using TextInput with scrollable={true} which seems to be working but the problem with that is I can't dismiss the keyboard once the keyboard is shown
I'm building a podcasting app with react native and I would like to implement the mini player you see at bottom of screen in most podcasting/music apps. See image below. I want to make the mini player stick no matter which screen you navigate to. Any idea how to implement this in react native? I'm using react navigation as the main navigator right now https://reactnavigation.org/.
The best way to do this is use the magic of flexbox.
Think about your app as combination of two major screens.
1) The part with header, navigation menus and the playlist (inside etc.)
2) The player
Try this layout
<View style={styles.container}>
<View style={styles.firstBox}>
1)
</View>
<View style={styles.secondBox}>
2)
</View>
</View>
Now all you have to do is assign proper styles
const styles = {
container: {
flex: 1,
},
firstBox: {
flex: 8
},
secondBox: {
flex: 2
}
}
This is enough for the basic structure. You can design accordingly.
I am currently working on my very first react-native application and am wondering how that slide in effect of a new view can be achieved and where that "hidden" view should be placed.
My Application is currently build like this:
<View style={{flex:1}}>
<View style={{flex:.8, justifyContent:'center'}}>
.. some login Form
</View>
<View style={{flex:.2, justifyContent:'center', alignItems:'center'}}>
<TouchableHighlight onPress={this._toggleRegistryView}>
<Text> or register here </Text>
</TouchableHighlight>
</View>
</View>
As you can see in this basic code I want to slide-in the Registration View as soon as the touchable component is pressed.
Do I need to store the view "invisible" with a width of 0 and height of 100% on one side and then animate it to the full device width?
Right now I have no idea besides a whole new view render when the state changes
render(){
return({this.state.view == 'login' ? <LoginView /> : <RegistryView />});
}
Unfortunately this triggers a "hard" view change and not a smooth right to left or left to right animation where the view slides in.
If my question was unclear please inform me - I'll gladly try to specify it :) Thank you for your help
You should split your application into multiple scenes (screens) and use the Navigator component to transition between the scenes.
Here is a tutorial from the TaskRabbit blog to get you started.
Once you have you scenes set up, you can experiment with different SceneConfigs for different types of transition animations.
A transition from a page to another is nothing else but navigation.
In order to navigate from a page to another in React Native, you will want a navigation library.
The default Navigator component from React Native might work, but it's got a lot of limitations and issues, and the default solution most people turn to (and which after 3yrs of RN I strongly recommend), is React Navigation. If you are using Expo, it also ships by default, so you can jump right into it, and define your screens like so:
import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Login: {
screen: LoginView,
},
Register: {
screen: RegisterView,
},
});
export default createAppContainer(AppNavigator);
If not, here's a quick start guid to using it outside of Expo.