please i have been trying to work with react-native Element framework but i get the error below , but when i remove the import very thing works fine , i tried creating other projects but i still get the same error , but as i said as soon as i remove the import the app works fine .
error i get
my main.js
import React from 'react'
import {
StyleSheet,
Text,
View,
StatusBar,
TextInput,
TouchableHighlight,
TouchableOpacity
} from 'react-native';
import {Input,Icon} from 'react-native-elements';
//import { Container, Header, Content, Footer, FooterTab, Button, Text } from 'native-base';
export default class Main extends React.Component {
render() {
return (
<Input
placeholder='INPUT WITH ICON'
leftIcon={
<Icon
name='user'
size={24}
color='black'
/>
}
/>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'stretch',
justifyContent: 'flex-start',
paddingTop:20,
backgroundColor:'#aaa'
}
});
export default Main;
then my App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {Provider} from 'react-redux';
import {configureStore} from './app/store';
import Main from './app/components/Main'
import { createStore, applyMiddleware } from 'redux';
import reducers from './app/reducer';
const store = createStore(reducers);
export default class App extends React.Component {
render() {
return (
<Provider store={configureStore()}>
<Main/>
</Provider>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
})
;
error after #Colin update
As asked by #Colin in the comment section, react-native-elements does not have any container component.
Thats the reason for your issue.
Edited: I request you to go through this link (its a link to the official documentation) and utilise the components which are supported.
Thanks to all ,
i found my mistake actually the doc i was using was 1.0.0 while the node version i was using is version 0.9 . thanks
Related
How to Add External StyleSheet for My React Native Project
Add External StyleSheet
First, you must create a file to export a StyleSheet object with styles.
Style.js
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
box: {
width: '80%',
height: 150,
backgroundColor: 'red',
alignSelf: 'center',
borderRadius: 9
}
});
export { styles }
And in your component, you must import that.
import React, { Component } from "react";
import { View } from 'react-native';
import { styles } from "./Style";
class Home extends Component {
render(){
return(
<View>
<View style={styles.box}>
</View>
</View>
)
}
}
export default Home;
Finally, run the app.
If I understand you correctly, you want to add a style to your component/s.
I assume you are using a Functional Component.
A good practice is to do it by creating a style.js file, on the same folder where your component is located.
style.js
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
backgroundColor: 'green'
}
})
export { styles }
and in your desired component you should import it.
MyComponent.js
import React from 'react'
import { View } from 'react-native'
import { styles } from './styles' //<<-- import
const MyComponent = (props) => {
. (Whatever states and handlers, etc. that your component does)
.
.
return (
<View style={styles.container}> //<<-- usage
...rest of your JSX
</View>
)
}
export default MyComponent
good luck!
I tried to implement react-native-show-hide-toggle-box for getting the toogle box but whenever i run the project I get an error:
(Unable to resolve module "./ToggleBoxStyle" from "node_modules/react-native-show-hide-toggle-box/ToggleBox.js")
This is the 1st time usage of this module for me and i am unable to get pass through it.
I checked the node module which contains the file ToogleBoxStyles and ToogleBox in the same directory, but when i went inside ToogleBox it is having this line:
import styles from './ToggleBoxStyle'
So how to make this work as i installed it by
npm i native-show-hide-toggle-box --save
Basic importing of default export is showing error to me.
import React from 'react';
import { LayoutAnimation, View, Text, StatusBar, ScrollView, Picker, StyleSheet } from 'react-native'
import ToggleBox from 'react-native-show-hide-toggle-box'
export default class TimeSlot extends React.Component {
render() {
return (
<ScrollView style={styles.container}>
<Toggle label='Show me something' value='asd' style={{backgroundColor: '#ddd', borderBottomWidth: 1}}>
<View style={{height: 300, alignItems: 'center', justifyContent: 'center', backgroundColor: '#eee'}}>
<Text>Hello, how are you?</Text>
</View>
</Toggle>
</ScrollView>
)
}
}
From ToogleBox.js
import React, { PropTypes } from 'react'
import { Text, View, Image, TouchableWithoutFeedback, Animated} from 'react-native'
// external libs
import Icon from 'react-native-vector-icons/MaterialIcons'
// styles
import styles from './ToggleBoxStyle'
How to make the above thing work for me?
For some reasons, this worked out with me. I used import { ToggleBox } from 'react-native instead of import { ToggleBox } from 'react-native-show-hide-toggle-box'.
I was trying to use the react-navigation StackNavigator, and backtracked my code multiple times but couldn't find the issue. I was trying to build a simple navigation menu using this function for ios.
I'm using expo. So I started this project by creating a new expo project through terminal with the command "create-react-native-app testExpo". As shown below I modified the App.js a bit then created a screens folder -> then created two screens: "HomeScreen" and "LoginScreen"
These are the pictures of my code and the error
https://i.ibb.co/fQ9fjf2/Screen-Shot-2019-01-10-at-9-02-54-AM.png
https://i.ibb.co/7Xtx6jM/Screen-Shot-2019-01-10-at-9-03-01-AM.png
https://i.ibb.co/C8xbBVY/Screen-Shot-2019-01-10-at-9-03-07-AM.png
//Error picture
https://i.ibb.co/chgwYHT/Simulator-Screen-Shot-i-Phone-X-2019-01-10-at-08-59-08.png
App.js
import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {StackNavigator} from 'react-navigation'
import LoginScreen from './screens/LoginScreen'
import HomeScreen from './screens/HomeScreen'
export default class App extends React.Component {
render() {
return (
<AppNavigator />
);
}
}
const AppNavigator = StackNavigator({
LoginScreen: {screen: LoginScreen},
HomeScreen: {screen: HomeScreen}
})
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
HomeScreen.js
import React, { Component } from 'react';
import {Text,
View,
StyleSheet} from 'react-native';
class HomeScreen extends Component{
render() {
return(
<View>
<Text>This is the home screen</Text>
</View>
);
}
}
export default HomeScreen;
LoginScreen.js
import React, {Component} from 'react';
import {Text,
View,
StyleSheet} from 'react-native';
class LoginScreen extends Component{
render() {
return(
<View>
<Text>This is the login screen</Text>
</View>
);
}
}
export default LoginScreen;
I expect the app to launch with multiple screens to the applications.
I'm new to React Native and I'm trying to make a custom component for a test app, but I'm getting this error when loading the app from Expo:
Uncaught error: java.lang.Exception: Bundle return code: 500.
Image: https://i.imgur.com/wRTxa8V.jpg
(not enough reputation to post image, sorry)
My project structure is basically as follows:
/TestApp
App.js
/src
/components
CustomButton.js
CustomButton.style.js
CustomButton.style.js
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
buttonContainer: {
width: 100,
height: 20,
alignItems: 'center',
border: '1px solid white',
backgroundColor: 'skyblue'
},
buttonText: {
color: 'white',
fontSize: 20
}
});
CustomButton.js
import React, { Component } from 'react';
import { TouchableOpacity, Text } from 'react-native';
import styles from './CustomButton.style';
export default class CustomButton extends Component {
constructor(props){
this.props = props;
}
render(){
return(
<TouchableOpacity
style={styles.buttonContainer}
onPress={this.props.onPress}>
<Text style={styles.buttonText}>
{this.props.title}
</Text>
</TouchableOpacity>
);
}
}
App.js
import React, { Component } from 'react';
import { Alert, AppRegistry, StyleSheet, View, Text } from 'react-native';
import CustomButton from './src/components/CustomButton';
export default class TestApp extends Component{
render(){
return(
<CustomButton/>
);
}
}
I'm pretty sure the issue is when I try to import the custom component, because the app loads when I comment the line. I've read some questions about this, and it usually happens because the path is incorrect, though I can't figure out what's wrong with my path.
Thanks in advance.
The import for the StyleSheet is wrong in your code, it must be imported from react-native
import {StyleSheet} from 'react-native'
Also constructor is not preceeding with a super class
You need to add
constructor(props){
super(props) <== If you want to access props
this.props = props;
}
The styles are also not valid, since there is no property for border, you may check this for more info.
I add a class just like in React.js but when the app runs it says the class doesn't exist. The new class I am adding can be in the same folder as index.ios.js and it still doesn't find it.
My index.ios.js:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Test from './Test.jsx';
export default class TestApp extends Component {
render() {
return (
<View>
<Test />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
AppRegistry.registerComponent('TestApp', () => TestApp);
**My new class:**
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class Test extends React.Component {
render() {
return (
<View>
<Text>This is Test.</Text>
</View>
)
}
}
module.exports = Test;
When I run the app it compiles but in the simulator it says that class can't be found. Is there something I'm doing wrong?
These didn't solve it but I figure out what it was:
My files had the '.jsx' extension instead of '.js'
My app worked once I changed them to '.js'.