I am using react native paper library for Appbar.
It is nice when I am showing Title and back and and menu is disabled.
Problem occurred when I enable back icon. Text slightly moving to right
In next image problem is showing -
And the code I have done is,
const ContentTitle = ({ title, style }) => (
<Appbar.Content
title={<Text style={style}> {title} </Text>}
style={{ alignItems: 'center' }}
/>
`<Appbar.Header
style={{ backgroundColor: CONSTANTS.COLOR.BASE_COLOR }}>
<Appbar.BackAction color="white" onPress={() => this.props.navigation.pop()} />
<ContentTitle titleStyle={{ textAlign: 'center' }} title={'History'} style={{ color: 'white', alignSelf: 'centered' }} />
</Appbar.Header>`);
What changes should I do to place title in center when back icon is enabled?
NB: Basically I am getting this problem for android device.
You can set appbar.BackAction to style={{ position: "absolute" }}
Related
I'm using react-native-floating-label-input package and the label has a background colour if I click on it. Can you help me how I can remove it? I read the documentation and messaged a creator but to no avail.
<View style={{ padding: 50, flex: 1, backgroundColor: '#fff' }}>
<FloatingLabelInput
label={'label'}
value={cont}
onChangeText={value => setCont(value)}
/>
</View>
I tried to add backgroudnColor for labelStyle, but as you can see on the second picture the problem is with background colour behind the text.
label={'label'}
value={cont}
onChangeText={value => setCont(value)}
labelStyles={{ backgroundColor: '#ad8b8b', padding: 12 }}
If you check the source code and styling here: https://github.com/Cnilton/react-native-floating-label-input/blob/master/src/index.tsx#L361
you can find that the property labelStyles is merged with global style.
Try to provide labelStyles with the same background colour value as your input.
<View style={{ padding: 50, flex: 1, backgroundColor: '#fff' }}>
<FloatingLabelInput
label={'label'}
value={cont}
labelStyles={backgroundColor: '#fff'}
onChangeText={value => setCont(value)}
/>
</View>
I am building a registration form in React Native. I have this view.
When keyboard is showing it is pushing my form and image over my title view like this.
What should i do so that it my view doesnot lose its shape. I already tried scrollview and keyboard avoiding view but they are not helping.
Here is my code.
<View style={styles.container}>
<View style={styles.headingContainer}>
<Text style={styles.headingText}>Sign Up</Text>
</View>
<View style={styles.form}>
<View style={{ marginTop: 5, width: '100%', padding: 10 }}>
<Input
name="name"
placeholder="Name"
label="Name"
/>
<View style={styles.buttons}>
<Button onPress={handleSubmit}>
{isLogin ? 'Log In' : 'Sign Up'}
</Button>
</View>
</View>
</View>
<View style={styles.logoCon}>
<Image style={styles.logo} source={Logo} />
</View>
</View>
);
}
export default AuthForm;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'flex-start',
},
headingContainer: {
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: '40%',
backgroundColor: Colors.primary800,
marginBottom: '-22%',
},
form: {
backgroundColor: Colors.primary100,
justifyContent: 'center',
alignItems: 'center',
height: 'auto',
width: '100%',
borderTopLeftRadius: 80,
},
logoCon: {
alignSelf: 'center',
height: 100,
width: 100,
marginTop: 'auto',
marginBottom: -15,
},
});
Update: I have solve the above issue, but now I am facing another issue i.e. I have to hide keyboard everytime i try to input text in any of the lower inputs. Also it is pushing my top view up inside the screen. NO scrollview is working. I have tried KeyboardAvoidingView, ScrollView, Animation, KeyboardAwareScrollView so far but got no luck.
PS: I know UIs are different. Its because i have completed the UI and this is the last thing i need to work on.
I have managed to overcome this issue using this npm package: react-native-keyboard-aware-scroll-view
npm install --save react-native-keyboard-aware-scroll-view
Then in your component, the basic usage is like below
return (
<Fragment>
<SafeAreaView style={{flex: 1}}>
<KeyboardAwareScrollView keyboardShouldPersistTaps='always'>
<View style={{flex: 1}}>
//The content
</View>
</KeyboardAwareScrollView>
</SafeAreaView>
</Fragment>
);
If you have a modal, I'd suggest you to use it like that
<Modal
animationType="slide"
transparent={true}
visible={this.state.search_modal_visible}
>
<KeyboardAwareScrollView contentContainerStyle={{flexGrow: 1}}>
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
//The content
</View>
</KeyboardAwareScrollView>
</Modal>
In your AndroidManifest.xml, please be sure the line below exists as an attribute for activity tag
<activity
android:windowSoftInputMode="adjustResize"
You can hide keyboard whenever you want like that in your code
Keyboard.dismiss();
The problem here is that you have in your AndroidManifest.xml:
windowSoftInputMode="adjustResize";
Change it to:
windowSoftInputMode="adjustPan"
Note: after this change you'll need run ./gradlew clean in android folder and react-native run-android in your project directory
Try to use KeyboardAvoidingView of react native
I hade the same issue, I used this to just hide the views I don't want to see whenever the keyboard is opened: https://github.com/TIKramer/react-native-hide-onkeyboard
If you found another solution please let me know.
In short: does KeyboardAvoidingView work in react-native-web or is there another way to move TextInput above keyboard when keyboard opens?
Getting the keyboard to work fluently in web environment is needed functionality. People might use web version of app with tablets or mobile devices in which cases handling keyboard fluently is important.
At the moment it seems that when focusing input the screen will move to it after character in keyboard is pressed. Before that the input can be completely under the keyboard which is not good for user experience.
In android and iOS Expo app KeyboardAvoidingView has worked perfectly and I have used "softwareKeyboardLayoutMode": "resize" to achieve desired outcome.
But in web I'm not sure if I am implementing KeyboardAvoidingView correctly, if more configuration is needed or if it works at all in web environment.
This is simplified return() of the LoginScreen.tsx where KeyboardAvoidingView is used
return (
<ImageBackground source={I.backGround} style={S.LoginStyles.container}>
<View style={S.LoginStyles.row}>
<Text style={S.LoginStyles.headerTitle}>
{language.LoginScreen.Text1}
</Text>
<Text style={S.LoginStyles.headerSubTitle}>
{language.LoginScreen.Text2}
</Text>
</View>
<KeyboardAvoidingView behavior="padding">
<View style={S.LoginStyles.middleContainer}>
<TextInput
style={[S.LoginStyles.formInput, { marginTop: 40 }]}
onChangeText={text => setFieldValue(C.DatabaseConstants.name, text)}
/>
<TextInput
style={S.LoginStyles.formInputPassword}
onChangeText={text =>
setFieldValue(C.DatabaseConstants.password, text)
}
onSubmitEditing={() => OnLogin()}
/>
<FunctionButton
func={OnLogin}
text={language.LoginScreen.Text5}
buttonStyle={S.ButtonStyles.login}
/>
</View>
</KeyboardAvoidingView>
</ImageBackground>
);
Also if it does not work how could this functionality (moving input on top of keyboard onFocus) could be achieved in react-native-web.
I have tried to add solutions found in:
How to prevent mobile keyboard from covering html input
HTML5 mobile keyboard covers the input in Full screen mode
Scroll textfield up when keyboard popsup
...in index.html file with no success.
EDIT
I have stackNavigator inside drawer navigation (react native navigation).
I'm not sure if react native navigation makes Keyboard not to work but it shouldnt. LoginScreen example (that is above) now works but I cannot get simple screen inside navigation to work. The code of the simple screen is below:
<View style={{
flex: 1,
alignItems: 'flex-start',
justifyContent: 'flex-start',
backgroundColor: 'red',
}}>
<ScrollView style={{ flexGrow: 1 }}>
<View style={{ height: 500, width: '100%' }}></View>
<KeyboardAvoidingView behavior="padding">
<View style={{ height: 100, backgroundColor: 'blue', width: '100%' }}>
<TextInput style={{
height: C.Dimensions.heightSm2, //based on screen height
minHeight: 27,
width: C.Dimensions.formInputWidth, //based on screen width
marginBottom: 5,
borderRadius: 20,
borderWidth: 1,
color: Colors.black,
borderColor: Colors.black20,
outlineWidth: 0,
fontSize: 20,
fontFamily: 'catamaranRegular',
}} />
</View>
</KeyboardAvoidingView>
</ScrollView>
</View>
When the TextInput inside blue View component is focused the keyboard hides the input and when character of keyboard is pressed the TextInput comes above keyboard.
I'm trying to stack content in the Navigation top bar that is being set using the setOptions method. However, I can't seem to stack vertically two pieces of content. Instead, I can only show a single piece of content. Keep in mind this header bar has no true navigation linking and is purely a "title" bar with text and imagery. It is also within the same component I use to actually create my navigation with createBottomTabNavigator().
What I would like is, pseudo-visually:
<Text><Image><Text>
<Text>
Here is my code:
navigation.setOptions({
headerTitle: (
<Text
style={{
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
}}
>
<Text
style={{
fontSize: 16,
lineHeight: 16,
}}
>
Left Text{' '}
</Text>
<Image
source={require('../assets/images/icon-large.png')}
style={{ resizeMode: 'contain', width: 25, height: 25 }}
/>
<Text
style={{
fontSize: 16,
lineHeight: 16,
}}
>
{' '}
Right Text
</Text>
</Text>
),
});
which gives me, pseudo-visually:
<Text><Image><Text>
Now, i've tried various layout's of <View> and <Text> and just cant seem to get the stacking visual im looking for. I've tried wrapping it all with a <View> and then a last <Text> but I believe the headerTitle property needs a <Text> or type string assigned to it.
Any suggestions how I can get another <Text> underneath (and centered) what I have already?
With a combination of this and moving the navigation settings to the Stack.Screen I was able to get what I wanted. My problem seemed to be that I was trying to set the header options within BottomTabNavigator. Instead, if I passed in a custom "Header" component, it rendered the way I wanted it. Like so:
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Scroll Rack"
options={{ headerTitle: (props) => <Header /> }}
component={BottomTabNavigator}
/>
</Stack.Navigator>
</NavigationContainer>
You need to have a View which behaves as a row inside a View which behaves as a column. In the example below, the first View as flexDirection: 'column' as default.
<View style={{backgroundColor: "#ff0000"}}>
<View style={{flexDirection: 'row', justifyContent: "space-between", backgroundColor: "#00ff00"}}>
<Text>Left</Text>
<Image
source={{uri: "https://miro.medium.com/max/712/1*EnF9uIN_u2_X7ey24lB7Tg.png"}}
style={{ resizeMode: 'contain', width: 25, height: 25 }}
/>
<Text>Right</Text>
</View>
<Text style={{textAlign: "center"}}>Bottom</Text>
</View>
Here's a snack of it
I have a pretty regular vertical FlatList, nothing special, however I found some weird styling bug: the background color of the list itself is always white, which makes my list items (which also has a white background) indistinguishable. Is there any way to fix it?
My code:
<FlatList
contentContainerStyle={{
backgroundColor:'purple',
}}
ListHeaderComponent={
<HeaderView />
}
data={places}
renderItem={({item}) => (
<PlaceListItem place={item} navigation={navigation} />
)}
/>
And PlaceListItem:
const styles = StyleSheet.create({
container: {
flex: 1,
borderWidth: 1,
borderRadius: 15,
borderColor: 'white',
overflow: 'hidden',
marginBottom: 10,
},
infoContainer: {
flex: 1,
backgroundColor: 'white',
paddingStart: 10,
},
image: {/*just size*/},
title: {/*just font style*/},
item: {/*just font style*/},
})
<SelectionHighlight
onPress={() => doStuff()}>
<View style={styles.container}>
<Image
style={styles.image}
source={{
uri: photo,
}}
/>
<View style={styles.infoContainer}>
<Text style={styles.title}>{title}</Text>
<Text style={styles.item}>{address}</Text>
</View>
</View>
</SelectionHighlight>
And results are:
Android
iOS
I found the issue, it turns out to be mine own mistake. I set backgroundColor:'white' to the TouchableHighlight, and for some reason it works fine on Android, but gives this result on iOS. Setting backgroundColor: 'transparent' to TouchableHighlight solved the issue.