I am trying to setup my child component with simple view as follow:
render() {
console.log("in render")
return (
<View style={{flex:1, backgroundColor: 'skyblue'}}>
<Text>hello</Text>
</View>
It dosnt display anything. If I remove the flex it show the "hello" text with the background color as specified. what have I done wrong?
I also using navigator... maybe I need to setup something in navigator to display the view with flex?
Try adding width: '100%' to the view style.
Related
I want to render multiple element with different styles but View and child View is not working as div working in html. please guide or share some resources to learn how multiple View work in a return.
import React from 'react'
import { Button, StyleSheet, Text, View,ScrollView } from 'react-native';
export default function Home() {
return (
<View>
<View style={styles.container}>
<Text >
Books are the best Mentors
</Text>
</View>
<View>
<Text style={{backgroundColor:'red'}} >
Books are the best Mentors
</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
container2: {
flex: 1,
backgroundColor: '#fff',
position:'absolute',
bottom:0
},
});
TL;DR <div> is not the same as <View>
It looks like the possible issue here is that <div> have different default styling, and you should always remember about this. For example the default value for flexDirection in RN is column, not row like we have with <div>s.
Even though the official RN documentation about View tells us this:
View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, <div>, android.view, etc.
We should always keep in mind the specifics of the particular platform we work with.
I would also recommend you to check out this tutorial regarding Flex styling in React Native to get better experience working with it.
I'm attempting to create navigation in React Native. I've made a custom component that consists of an image and some text. Before applying TouchableOpacity the styling works fine. But after I apply it to one of the components, this happens.
All of the code can be found here, ready to run.
I'd like that the component titles MojQR doesn't deform, but stays like the rest of them. Currently, as seen in the code, the TouchableOpacity is only applied to MojQR
You have a problem with the styling you are using. When you set the dimensions (width, height) to take a percentage, it will take the percentage from the component that is wrapping it. That's why when you added TouchableOpacity it mess all the styling. You have 2 options, change the styling pattern you are using or make a simple change that can change the width dynamically from MenuItem like so:
//App.js
<TouchableOpacity style={styles.touchableContainer} onPress={() => navigation.navigate('Details')}>
<MenuItem itemImage={require('./app/img/QR_code_for_mobile_English_Wikipedia.svg.png')} children='Moj QR' isWrapped={true} />
</TouchableOpacity>
...
//And the styling inside your style object
touchableContainer: {
width: '50%'
}
In the code above, you add that prop that will be used to change the styles in
//MenuItem.js
//change the wrapper for this one:
<View style={this.props.isWrapped ? {...styles.menuItem, width: '100%'} : styles.menuItem}>
...
//And add the flexGrow property to your styles.menuItem
menuItem: {
width: '50%',
height: '33.3333%',
padding: 10,
flexGrow: 1,
},
When running the code an emulator for an IOS phone is produced. The application launches but produces an entire black screen. The only way to see the text is by changing the color of the text. My code is seen in the bottom.
import React from "react";
import { AppRegistry, Text } from "react-native";
const App = () => {
return <Text style={{ color: "red" }}>Some Text</Text>;
};
AppRegistry.registerComponent("albums", () => App);
From my understanding. The initial default should be a white background and the text should be in black. Hope someone can help me better understand what the issue might be. This is my first attempt with React Native although I do have some experience with React.
Thank you
You need to wrap text in a View like
<View style={{backgroundColor: 'white'}}>
<Text style={{ color: "red" }}>Some Text</Text>
</View>
As for the default style being black text on white background, that's the case if you use react-native-init or Expo to generate the project.
I am new to React Native so this might be a silly question.
What I am trying to get is something like this :
Where I have a parent view with 2 children, Image and Text, aligned vertically to the left. What I want is the parent view to cover only the width of its children. But instead what I get is this :
The parent view stretches to the complete width of the mobile screen.
Here is my code :
render () (<View style={{backgroundColor: '#333333'}}>
<Image source={btnImageSource} />
<Text>Some label</Text>
</View>);
Something similar to Android's 'wrap-content' width value.
You will be able to do this using flex. I found this guide to be very helpful when working with flex.
A good starting point would be to create a parent View that is flexDirection: row, justifyContent: flex-start
render () (
<View style={{justifyContent: 'flex-start', flexDirection: 'row'}}>
<View style={{backgroundColor: '#333333'}}>
<Image source={btnImageSource} />
<Text>Some label</Text>
</View>
</View>
);
I have a list of data that I want to place inside a FlatList (i.e. ScrollView) and whenever I try to scroll down to view more of the list, the ScrollView just bounces back up to the top of the list so I cannot ever see the bottom of the list.
I am using Expo and the strange thing is that if I just create a new project or copy/paste some code into Snack then the scrolling works just fine. It is only in my current project that I cannot get the list to scroll. I have even gone into the main.js file and just pasted my example code in there and the issue still persists.
My example code is located here: https://snack.expo.io/ryDPtO5-b
I have pasted this exact code into my project and it is not working as expected.
Versions:
RN 0.44 /
Expo SDK 17.0.0 /
React: 16.0.0-alpha.6
My actual use case for my project involves placing a FlatList component at the bottom-third of the screen to show a list of jobs. This is where I discovered the error and when I started to try and debug the issue. In my project I have a parent View with a style of {flex: 1 with a child of List that contains the FlatList... List comes from react-native-elements
EDIT
Here is the code I am actually trying to use:
<View style={styles.container}>
<View style={containerStyles.headerContainerStyle}>
<Text style={[textStyles.h2, { textAlign: "center" }]}>
Territory: {this.props.currentTerritory}
</Text>
</View>
<View style={styles.mapContainer}>
<MapView
provider="google"
onRegionChangeComplete={this.onRegionChangeComplete}
region={this.state.region}
style={{ flex: 1 }}
>
{this.renderMapMarkers()}
</MapView>
</View>
<Badge containerStyle={styles.badgeStyle}>
<Text>Orders Remaining: {this.props.jobsList.length}</Text>
</Badge>
<List containerStyle={{ flex: 1 }}>
<FlatList
data={this.props.jobsList}
keyExtractor={item => item.id}
renderItem={this.renderJobs}
removeClippedSubviews={false}
/>
</List>
</View>;
And all my styles
const styles = StyleSheet.create({
container: {
flex: 1,
},
mapContainer: {
height: 300,
},
badgeStyle: {
backgroundColor: 'green',
alignSelf: 'center',
marginTop: 15,
width: 300,
height: 35,
},
});
and lastly, my renderItem function:
renderJobs = ({ item }) => {
const { fullAddress, pickupTime } = item;
return (
<ListItem
containerStyle={
item.status === "active" && { backgroundColor: "#7fbf7f" }
}
title={fullAddress}
titleStyle={{ fontSize: 14 }}
subtitle={pickupTime}
subtitleStyle={{ fontSize: 12, color: "black" }}
onPress={() =>
this.props.navigation.navigate("jobActions", { job: item })
}
/>
);
};
I was able to solve this problem.
The Solution is to use flatlist component <View style={{flex:1}}> after renderRow return component <View style={{flex:1}}>
I am confused - are you using a FlatList or a ScrollView - these two elements have completely different lifecycle events (a FlatList requires you to define how individual rows will render and their keys, whereas a ScrollView expects the children to be rendered inline with the component).
Regardless, I think the issue is in your structure, it sounds like the List element requires a height attribute as well ({flex: 1}) as the absolute parent is filling it's space, but the List component is not having a pre-defined height.
So after debugging this a bit more today and I ended up just creating a brand new Expo project and copy/pasting all my source code into the new project, changing my Github project name to the new name, and setting the remote origin to my github repo (the one where I changed the name) on my new local project.
For some reason there appeared to be a problem with the Expo project. It almost seemed like the actual NAME of the project was causing issues as I attempted to change the NEW project's name to that of the original project, but it didn't work. It only worked when doing a brand new project, but using the exact same source code.