Im starting a react-native project. But even after following best community working code, Im getting errors on device emulation. Could you please help ?
import React, { Component } from 'react';
import { Appregistry, Text,View ,StyleSheet} from 'react-native';
import Compo from './app/app/Compo';
export default class test extends Component {
render(){
return(
<View>
<Compo />
</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,
},
});
AppRegistry.registerComponent('test', () =>test);
and my called app is
import React, { Component } from 'react';
import { Appregistry,Text,View,StyleSheet } from 'react-native';
export default class Compo extends Component {
render(){
return(
<View>
<Text>Hi Bineesh</Text>
</View>
)
}
}
AppRegistry.registerComponent('Compo', () => Compo);
Why this is throwing error AppRegistry ?
Javascript is caseSensitive and the word Appregistry was to be as AppRegistry.
Related
I am trying to position my bottomnavbar to the bottom of my screen, but is is not working?
I've been trying to set the position to absolute and then bottom: 0, but if I do it in the app.js component on or do it straight in the stylesheet of the bottomNavbar.js component, none of it works.
here is my app.js component:
import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
class BottomNavbar extends Component {
render() {
return (
<View style={styles.container}>
<Text>insights</Text>
<Text>Incidents</Text>
<Text>PLUS</Text>
<Text>Team Alerts</Text>
<Text>More</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-around',
backgroundColor: 'grey',
position: 'absolute',
bottom: 0,
},
});
export default BottomNavbar;
And here is my BottomNavbar component:
import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
class BottomNavbar extends Component {
render() {
return (
<View style={styles.container}>
<Text>insights</Text>
<Text>Incidents</Text>
<Text>PLUS</Text>
<Text>Team Alerts</Text>
<Text>More</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-around',
backgroundColor: 'grey',
position: 'absolute',
bottom: 0,
},
});
export default BottomNavbar;
Now I would like the bottomnavbar to show up at the bottom of the phonescreen, but I cannot figure out how to do that.
Try this one
import { AppRegistry } from 'react-native';
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
class BottomNavbar extends Component {
render() {
return (
<View style={styles.container}>
<Text>insights</Text>
<Text>Incidents</Text>
<Text>PLUS</Text>
<Text>Team Alerts</Text>
<Text>More</Text>
</View>
);
}
}
class App extends Component {
render() {
return (
<View style={styles.appContainer}>
{/* ...other components */}
<BottomNavbar />
</View>
);
}
}
const styles = StyleSheet.create({
appContainer: {
flex: 1,
},
container: {
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: 'grey',
position: 'absolute',
bottom: 0,
width: '100%',
height: 80,
},
});
AppRegistry.registerComponent('myApp', () => App);
i have used createDrawerNavigator but its not working
my code is
//App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {createDrawerNavigator} from 'react-navigation';
import HomeScreen from './HomeScreen';
import SettingsScreen from './SettingsScreen';
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Hey</Text>
<MyApp/>
</View>
);
}
}
export default App;
const MyApp=createDrawerNavigator({
Home:{
screen:HomeScreen
},
Settings:{
screen :SettingsScreen
}
});
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
//HomeScreen.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
class HomeScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Hey There</Text>
</View>
);
}
}
export default HomeScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
//SettingScreen.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
class SettingsScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Hey There</Text>
</View>
);
}
}
export default SettingsScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
please anyone knows how to create drawerlayout in react-native explain it to me
Removing the alignItems: 'center' of your HomeScreen style should do the job.
I have problem in changing value of state.It gives mi following error
"Undefine is not a function(evaluating '
this.setState({
switchValue:false
})')"
I have search on stack overflow but the solution is not work for me.
import React, { Component } from 'react';
import {
Alert,
AppRegistry,
StyleSheet,
Text,
View,
Switch
} from 'react-native';
export default class AwesomeProject extends Component {
constructor(props) {
super(props);
this.state = {switchValue: true};
// Toggle the state every second
}
_onPressButton() {
this.setState({
switchValue: false
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Switch
onValueChange={this._onPressButton}
value={this.state.switchValue }
/>
</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,
},
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
The this inside _onPressButton is not referencing the correct reference. On that case, this inside that _onPressButton is actually reference the button. You can either do this two ways.
<Switch
onValueChange={this._onPressButton.bind(this)}
value={this.state.switchValue }
/>
Or
<Switch
onValueChange={() => this._onPressButton()}
value={this.state.switchValue }
/>
I'm a newbie in React Native, and I try to learn basic flexbox from tutorial point but I always get an error, I have two file index.android.js and MyPresentationalComponent.js for styles code file.
This error picture, when I run myproject
index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
styles,
View
} from 'react-native';
import MyPresentationalComponent from './MyPresentationalComponent';
export default class belajar extends Component {
constructor() {
super();
this.state = {
myText: 'Lorem ipsum dolor sit amet.'
};
}
render() {
return (
<View>
<MyPresentationalComponent style={styles.container} />
</View>
);
}
}
AppRegistry.registerComponent('belajar', () => belajar);
MyPresentationalComponent.js
import React, { Component } from 'react';
import {
View,
StyleSheet
} from 'react-native';
const MyPresentationalComponent = (props) => {
return (
<View style={styles.container}>
<View style={styles.redbox} />
<View style={styles.bluebox} />
<View style={styles.blackbox} />
</View>
);
};
export default MyPresentationalComponent;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'grey',
height: 600
},
redbox: {
width: 100,
height: 100,
backgroundColor: 'red'
},
bluebox: {
width: 100,
height: 100,
backgroundColor: 'blue'
},
blackbox: {
width: 100,
height: 100,
backgroundColor: 'black'
},
});
The problem is that you are not exporting the styles variable out of the file, and so it will not be visible to other files, even when you import the class marked with export default. I would suggest the following:
import React, { Component } from 'react';
import {
View,
StyleSheet
} from 'react-native';
const MyPresentationalComponent = (props) => {
return (
<View style={styles.container}>
<View style={styles.redbox} />
<View style={styles.bluebox} />
<View style={styles.blackbox} />
</View>
);
};
export default MyPresentationalComponent;
export const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'grey',
height: 600
},
redbox: {
width: 100,
height: 100,
backgroundColor: 'red'
},
bluebox: {
width: 100,
height: 100,
backgroundColor: 'blue'
},
blackbox: {
width: 100,
height: 100,
backgroundColor: 'black'
},
});
Then, your index.android.js should look like this:
import React, { Component } from 'react';
import {
AppRegistry,
styles,
View
} from 'react-native';
import MyPresentationalComponent, {styles} from './MyPresentationalComponent';
export default class belajar extends Component {
constructor() {
super();
this.state = {
myText: 'Lorem ipsum dolor sit amet.'
};
}
render() {
return (
<View>
<MyPresentationalComponent style={styles.container} />
</View>
);
}
}
AppRegistry.registerComponent('belajar', () => belajar);
Please note the difference between defaut exports and named exports. You can have just one default export, and the name that you give it is not relevant at all, when you import it, it can use a different name. For named imports, you need to use the curly braces notation and the name must be the same in both export and import . However, you can have as many of them as you want.
According to #Gui Herzog answer simplier solution to include any external style file can be done:
stylesheet file
import {
StyleSheet
} from 'react-native';
export default styles = StyleSheet.create({
// or export const styles = StyleSheet.create({
Container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
})
Than simply use in your components:
import styles from './styles'
// or import { styles } from './styles'
using:
<View style={styles.Container}>
The problem is because you're exporting only the component MyPresentationalComponentand not its StyleSheet. If you want to have global styles I recommend you to create a different file. You could call it Styles.js and export it so you can use on all components you need. For example:
import { StyleSheet } from 'react-native'
module.exports = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'grey',
height: 600
},
})
Then you can import it on your MyPresentationalComponent and Index.js using:
import STYLES from 'Styles.js'
And to use you could:
<Component style={STYLES.container} />
Hope this helps!
I want to display image in my react native program which is taken from nasa api. I created a react native project:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
StatusBar,
Image
} from 'react-native';
import api from './utilities/api';
export default class test extends Component {
constructor(props){
super(props);
this.state ={
apod: [],
apodName: ''
}
}
componentWillMount(){
api.getApod().then((res)=> {
this.setState({
apod: res.apod,
apodName: res.url
})
});
}
render() {
console.log("Apod:", this.state.hdurl);
return (
<View>
<StatusBar
backgroundColor="#00FA9A"
barStyle="dark-content"
/>
<Text style={styles.welcome}>
Apod: {this.state.apodName}
</Text>
<Image source={{uri: api.hdurl}}
/>
</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,
},
thumbnail: {
width: 53,
height: 81,
}
});
I also have api.js file :
var api ={
getApod(){
var url = 'https://api.nasa.gov/planetary/apod?api_key=MY KEY';
return fetch(url).then((res) => res.json());
}
};
module.exports = api;
Result I have on screen, its just writes an image link. But how to display actual image