I am working on a React native project, I am trying to apply two different styles in View Component but it is taking only one style someone please tell me how to overcome this issue
This is App.js
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const App = props => {
return (
<View style={{flex: 1, flexDirection: 'row'}} style={styles.container}>
<Text>Mark</Text>
<Text>Williams</Text>
<Text>Henry</Text>
<Text>Tom</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 0,
padding: 20,
color: '#ff0000',
},
});
export default App;
Hi try like below,
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const App = props => {
return (
<View style={[{flex: 1, flexDirection: 'row'}, styles.container]}>
<Text>Mark</Text>
<Text>Williams</Text>
<Text>Henry</Text>
<Text>Tom</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 0,
padding: 20,
color: '#ff0000',
},
});
export default App;
Using a style array you can set multiple styles for a same component.
I am just importing my files from a custom created folder component to App.js file and import key in not working on manually created files while working on other imports on React and React native.
I am making an application of React-Native using Expo CliCode Image
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import test from './component/test'; // This line is producing error
export default function App() {
return (
<View style={styles.container}>
<test/>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
const styles = StyleSheet.create({`enter code here`
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
TEST COMPONENT :----
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class Test extends React.Component {
render(){
return (
<View style={styles.container}>
<Text>Login js file</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
PLEASE VISIT CODE IMAGE line 3 is causing error
https://i.stack.imgur.com/WRYAt.png
I was trying a module located on npm on snack.expo.
But the following error is given to me.
Invariant Violation: View config not found for name RNMaterialLetterIcon
Where am I doing wrong?
Link: https://snack.expo.io/SyZa8lUEQ
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import RNMaterialLetterIcon from 'react-native-material-letter-icon';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<RNMaterialLetterIcon
size={80}
border={true}
borderColor={"#dd2c00"}
borderSize={2}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
I'm newby to Redux. I was trying to persist data on local storage through redux-persist. I followed the tutorial and the data stored in storage as below.
import {createStore, applyMiddleware, compose} from 'redux';
import {AsyncStorage} from 'react-native';
import {persistStore, autoRehydrate} from 'redux-persist';
import reducer from '../reducer';
var defaultState = {
todos: []
};
exports.configureStore = (initialState=defaultState) => {
var store = createStore(reducer, initialState, compose(
autoRehydrate()
));
persistStore(store, {storage: AsyncStorage});
return store;
}
And here is my App.js.
import React, { Component } from 'react';
import {Provider} from 'react-redux';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import Main from './app/components/Main';
import {configureStore} from './app/store';
export default class App extends Component<Props> {
render() {
return (
<Provider store={configureStore()}>
<Main/>
</Provider>
);
}
}
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,
},
});
But I guess, there is new update in redux-persist. So, with this code I get the error like below.
As I understand, within new update there is no more autoRehydrate. But I can't handle, how to update the code so it works with new version. Can you help me, please?
I am new to react native I am using expo app to run my code I dont have index file as explained in other questions all the files i have are app.js ,login.js, router.js,home.js and My application flow should go like this Login> on button click > Home
but on button click I am getting error Undefined is not an object(evaluating 'this.props.navigation'),
please help me where i am going wrong.
thanks in advance.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Login from './containers/Login/Login';
import {Navigate} from './containers/Navigation/Router';
import { AppRegistry } from 'react-native';
export default class App extends React.Component {
render() {
return (<Login navigation={this.props.navigation}/>);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
import React from 'react';
import { StyleSheet, Text,TextInput,Button,Image, View } from 'react-native';
import Navigate from '../Navigation/Router';
import RNChart from 'react-native-chart';
export default class Login extends React.Component{
static navigationOptions = {
title:'Login',
};
render() {
const navigate = this.props.navigation;
return (
<View style={styles.container}>
<RNChart style={styles.chart}
chartData={chartData}
verticalGridStep={5}
type="bar"
xLabels={xLabels}>
</RNChart>
<Image
source={require('../../NCS.png')}
/>
<TextInput
style={styles.textInput}
placeholder="Username"
/>
<TextInput
style={styles.textInput}
placeholder="Password"
secureTextEntry= {true}
/>
<Button
onPress={this._handlePress}
title="Login"
color="#0086b3"
/>
</View>
);
}
_handlePress(event) {
//navigate('Home')
this.props.navigation.navigate('Home', {name: 'Home'})
}
}
var chartData = [
{
name:'BarChart',
type:'bar',
color:'purple',
widthPercent:0.6,
data:[
30, 1, 1, 2, 3, 5, 21, 13, 21, 34, 55, 30
]
},
{
name:'LineChart',
color:'gray',
lineWidth:2,
showDataPoint:false,
data:[
10, 12, 14, 25, 31, 52, 41, 31, 52, 66, 22, 11
]
}
];
var xLabels = ['0','1','2','3','4','5','6','7','8','9','10','11'];
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
textInput: {
padding: 10,
width: 200,
},
chart: {
position: 'absolute', top: 16, left: 4, bottom: 4,right: 16
}
});
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {Navigate} from '../Navigation/Router';
export default class Home extends React.Component {
static navigationOptions = {
title:'Home',
};
render() {
return (
<View style={styles.container}>
<Text> Work under progress</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {StackNavigator} from 'react-navigation';
import Login from '../Login/Login';
import Home from '../Home/Home';
export default Navigate = StackNavigator({
Home: { screen: Home, },
});
The problem is that React Navigation is not connected to your App component as #Eden mentioned. The component you return in App needs to be your StackNavigator.
Here's a very good tutorial that show's this with a TabNavigator.
https://hackernoon.com/getting-started-with-react-navigation-the-navigation-solution-for-react-native-ea3f4bd786a4