I am learning React Native and applying some simple styling to a View. But the styling is not showing up at all. What am I doing wrong?
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Header extends Component {
render() {
return (
<View style={styles.container}>
<Text> Hello </Text>
</View>
)
}
}
const styles = {
container: {
backgrounColor: '#ddd',
color: 'red',
paddingTop: 14
}
}
If I change it to <View style={{backgroundColor: '#ddd', color: 'red', paddingTop: 14}}> it would work, but why won't the first approach work?
I am using:
react-native-cli: 2.0.1 and
react-native: 0.57.8
You need to use StyleSheet to create JavaScript styles in react-native
Import StyleSheet from react-native and change your variable style to:
const styles = StyleSheet.create({
container: {
backgrounColor: '#ddd',
color: 'red',
paddingTop: 14
}
});
Related
I have Lottie React Native working perfectly in my project except for one minor issue. The colour of the animation is not appearing and I cannot seem to identify what the cause is here. The component is very simple
import React from 'react';
import {StyleSheet, View, Text} from 'react-native';
const styles = StyleSheet.create({
text: {
fontFamily: 'Roboto-Bold',
fontSize: 18,
},
});
export default (props) => {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={styles.text}>Login Screen</Text>
</View>
);
};
Can see here in this that the background of the animation is white when it should have a background colour set: https://lottiefiles.com/7825-money-transfer. Any thoughts/guidance is appreciated.
Here is the working example
Snack link: https://snack.expo.io/#msbot01/forlorn-raspberries
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import LottieView from 'lottie-react-native';
export default class NoNetwork extends Component {
render() {
return (
<View style={{ flex: 1, backgroundColor:'green' }}>
<LottieView source={require('./pay.json')} autoPlay loop />
</View>
);
}
}
const styles = StyleSheet.create({});
I am starting with React-Native. I was able to see the <Text>. Then I progressed in adding my <TextInput>
import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
export default class App extends Component {
state = {
placeName: ''
}
placeNameChangedHandler = event => {
alert(event)
}
render(){
return (
<View style={styles.container}>
<Text>Ayman</Text>
<TextInput
style={{width:300, borderColor:"black"}}
value={this.state.placeName}
onChangeText={this.placeNameChangedHandler}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I am able to bundle my Javascript app, but the UI shows a blank screen.
Note that I'm a novice and I'm using expo on my phone for UI device.
Add borderWidth: 1 in TextInput styles and it will show the empty textinput.
I need to create a simple layout.
I have a header component and beneath it I have a navigation tabs with content (see sketch - https://imgur.com/a/9H7FMYU).
I wish to achieve this with react navigation or react native navigation.
The reason I don't want to use react-native-tab-view is because it's not maintained and have a lot of bugs.
EDIT: I just found out that React navigation uses react-native-tab-view for displaying tabs. Therefore if you are looking for a solution, either use #user:568754 answer bellow or use react-native-tab-view with a header
I think what you are looking for is the MaterialTopTabNavigator component in react-navigation.
Here is some sample code:
import React from 'react';
import { Text, View } from 'react-native';
import { createMaterialTopTabNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
class Head extends React.Component {
render() {
return (
<View style={{ height: 200, backgroundColor: 'blue' }}/>
);
}
}
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
const TabNavigator = createMaterialTopTabNavigator({
Home: HomeScreen,
Settings: SettingsScreen,
});
const RootNav = createAppContainer(TabNavigator);
class RootScreen extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<Head />
<RootNav />
</View>
);
}
}
export default RootScreen;
And a link to an Expo snack to preview: https://snack.expo.io/#bra/creatematerialtoptabnavigator-example
I've been working with React Native recently trying to produce a mobile application. I'm planning on using the react-navigation plugin in order to allow the user to change screens. However, when I import the screen (ScreenOne.js) into the App.js. However, I get the error:
Unable to resolve module `screens/ScreenOne` from `C:\Users\User\Desktop\Projects\LRAPPMAIN\App.js`: Module `screens/ScreenOne` does not exist in the Haste module map
This is strange as I only get this error when importing it. My code is as follows:
ScreenOne.js
import React, {Component} from 'react';
import {Button, Text, View} from 'react-native';
export class ScreenOne extends Component {
render() {
return (
<View>
<Text>This is the Settings screen</Text>
<Button title="Home"/>
</View>
)
};
export default ScreenOne;
App.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import ScreenOne from 'screens/ScreenOne'
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
Is there anything I'm doing wrong here?
When you import something on react and don't use relative paths, it will always look inside your node-modules folder.
What you probably want to do on your App.js file is
import ScreenOne from './screens/ScreenOne';
This way, react will not look for the file relative to your current one.
also
you forgot to close one curly bracket on your ScreenOne.js file.
I was trying to make an app on React-Native
To start, I did mere basic where I wanted to make a bottom Navigation
This is what I did at start to test
import React, { Component } from 'react'
import {
StyleSheet,
View,
Text,
Image
} from 'react-native';
class MainScreen extends Component {
constructor () {
super ()
this.board = []
}
render () {
return (
<View style={MainScreenBox}>
<View style={GridBox}>
<Text> Testing..........</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
MainScreenBox: {
display: "flex",
flexDirection: "column"
},
GridBox: {
marginTop: "90%",
marginLeft: 5,
marginRight: 5
}
})
const {
GridBox,
MainScreenBox
} = styles
Here, I did something as simple as marginTop: "90%", expecting the text would come at bottom but it still remains half way on the screen.
Question: Any Idea why this could be happening?
Clean all styles and put this to MainScreenBox style:
const styles = StyleSheet.create({
MainScreenBox: {
flex: 1,
justifyContent:'flex-end'
}
})
and use style={styles.MainScreenBox} to apply in root View. You can refer to flex doc to see how FlexBox works. Also notice that flexDirection is column by default in react native you do not have to set it and display:"flex" neither.
Add a flex weight (flex:1) to your main container.
MainScreenBox: {
flex:1,
display: "flex",
flexDirection: "column"
},