Im new at react native and I'm trying to do a simple aplication.
I just put a text and this is result in Nexus 5:
I understood that putting SaveAreaView this would be fixed but it dosen't.
return (
<SafeAreaView style={{flex: 1}}>
<Text style={styles.principalTitle}>Just a text</Text>
</SafeAreaView>
);
How I can control the top bar for the text apears in a visible zone? Thank you.
The purpose of SafeAreaView is to render content within the safe area
boundaries of a device. It is currently only applicable to iOS devices
with iOS version 11 or later. - SafeAreaView
In your case the SafeAreaView has no effect, but you can pass a marginTop to the view or directly to your text. E.g. :
return (
<SafeAreaView style={{flex: 1, marginTop: 20 }}>
<Text style={styles.principalTitle}>Just a text</Text>
</SafeAreaView>
);
Following Tim reference answer I improved him code.
With React Native you can control status bar height:
import {... , StatusBar} from 'react-native';
return (
<SafeAreaView style={{flex: 1, paddingTop: StatusBar.currentHeight }}>
<Text style={styles.principalTitle}>Just a text</Text>
</SafeAreaView>
);
I prefered padding for conserve Background.
Thank you!
Related
I want to do a line like this one, but I don't know how (btw the text on the image is in spanish, but it does not matter).
You can draw a separator with flexbox properties even with a text or view or anything you want in the center of the line.
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
<View>
<Text style={{textAlign: 'center', paddingHorizontal:8}}>Hello</Text>
</View>
<View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
</View>
Pls, take a look at this link.
Hope it will help.
Draw horizontal rule in React Native
It can be done easily by installing packages.
https://daisyui.com/components/divider/
It can be done easily without adding any library. Here's an exmaple -
https://snack.expo.dev/#arjunshukla97/divider
I'm developing project on react-native, my problem is that modal is over the drawer navigator, I tried set zIndex but it is useless.
My modal:
<Modal visible={isVisible} animationType={'fade'} transparent={true}>
<Animated.View style={{ marginTop: marginTop, zIndex: 0 }}>
...
</Animated.View>
</Modal>
My drawer:
<DrawerContentScrollView {...props} style={{ marginTop: -5 }}>
<ImageBackground source={back} style={{...s.drawerContainer, zIndex: 100}}>
...
</ImageBackground>
</DrawerContentScrollView>
here is screenshot, I need to set drawer over this modal
The modal is natively on top of everything, check this question as well: Bring View on top of Modal using zIndex style with React-Native
You cannot put the drawer above it unfortunately.
I use the keyboardAvoidingView, to display inputs and used next focus. But, when i click in first input ( print label 1623 - Acidez ), this is hidden. How make show this?
<ReactNative.View key={this.state.selectedTabIndex}>
<ReactNative.ScrollView style={{ height: this.props.styles.height - 40 }}>
<ReactNative.KeyboardAvoidingView
keyboardVerticalOffset={0}
behavior="position"
contentContainerStyle={{ paddingTop: this.state.size }}
>
{this.tabs[this.state.selectedTabIndex].render()}
</ReactNative.KeyboardAvoidingView>
</ReactNative.ScrollView>
</ReactNative.View>
if you increase 'keyboardVerticalOffset' to bigger value like '100' of KeyboardAvoidingView to some bigger amount it would scroll up from keyboard thus avoiding it.I also spent much time in finding the right solution on internet but finally figure it out myself for 'react-native' version '0.50.4'.I got it working like this
<View style={…..}>
<ScrollView>
<KeyboardAvoidingView style={{ flex: 1 }}
keyboardVerticalOffset={100} behavior={"position"}>
</KeyboardAvoidingView>
</ScrollView>
</View>
keyboardVerticalOffset should be the distance between the top of the screen and the top of the KeyboardAvoidingView. If you're using flex, that number is going to be different depending on the size of the device you're viewing the app on.
The simplest approach I have found is to simply wrap the whole page with KeyboardAvoidingView. By making it your top-level wrapper, you will never have to worry about the keyboardVerticalOffset.
Experiment with the three behavior options from there until you get something that works.
What works today for me - on android - was..
<KeyboardAvoidingView
key={2}
keyboardVerticalOffset={0}
behavior={"padding"}
style={{
flex: 1,
overflow: "hidden",
height: "100%",
paddingTop: 0,
marginTop: 0,
borderTopWidth: 0,
}}
windowSize={1}
enabled
>
(...)
</KeyboardAvoidingView>
I'm having a RefreshControl attached to a ScrollView. It all works as expected but initially (when I didn't start scrolling), there's always showing a RefreshControl on the top right. When I start scrolling, it disappears.
Any idea how to get rid of that?
Code is nothing special, if you want, i'll give it here:
// ...
export default class SomeList extends React.Component
{
// ...
render() {
return <View style={{flex: 1}}>
<CustomNavbar />
<ScrollView
style={{marginTop: 35}}
refreshControl={
<RefreshControl
tintColor={$.config.colors.style}
onRefresh={() => this._refreshList()}
refreshing={this.state.listRefreshing}
/>
}
>
{this._renderItems()}
</ScrollView>
</View>
}
}
This is a bug in react-native which was introduced in version 0.31 or so.
It was fixed in version 0.34.1 (see this commit), so I guess you're using a previous version.
If you do not wish to upgrade, you can temporarily solve it by settings the background color of the refresh control to transparent:
<RefreshControl style={{backgroundColor: 'transparent'}}/>
I am trying to create a view with a border around it that is centered and fills 80% of the screen. I have come up with this:
<View style={{flexDirection: 'row'}}>
<View style={{flex: .1}} />
<View style={{flex: .8, borderWidth: 2}} />
<View style={{flex: .1}} />
</View>
which works, but seems awfully verbose.
Is there a better (more succinct) way to create a view that is a certain percentage of the screen width and centered in the page?
UPDATE:
Starting from React Native version 0.42 we now have a full percentage support for width, height , padding and so on, see the full list and examples here:
https://github.com/facebook/react-native/commit/3f49e743bea730907066677c7cbfbb1260677d11
Old method:
Consider using Dimensions, like:
import Dimensions from 'Dimensions';
and then in element's style:
width: Dimensions.get('window').width / 100 * 80,
Working example: https://rnplay.org/apps/4pdwlg