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'.
Related
This is the screenshot:
But I don't want to be like this screenshot. I want to full page. I did not use React Native SafeAreaView but it seems like I have been use. I want to full page of this view but it's not. How can I do that?
import React, { Component } from 'react'
import { Text } from 'react-native';
import { Provider } from 'react-redux'
import { store, persistor } from './stores/configureStore'
import AppNavigator from './navigators/Navigators';
class App extends React.Component {
render(){
return <Text>asdasdsad</Text>
}
}
export default App;
I think you need to hidden the status bar, you can try like this.
import React, {Component} from 'react';
import {Text, StatusBar, View} from 'react-native';
class App extends React.Component {
render() {
return (
<View style={{flex: 1}}>
<StatusBar hidden={true} />
<Text>Hello</Text>
</View>
);
}
}
export default App;
import { SafeAreaView} from 'react-native'
Simply wrap your top-level view with a SafeAreaView with flex: 1 style applied to it. Do remember to provide top-level layout style to the view under SafeAreaView, not the SafeAreaView.
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1, paddingHorizontal: 20 }}>
Other component here
</View>
</SafeAreaView>
Problem:
I have created a react-native application. There are I am using a linear gradient.
This is my code.
import React, { Component } from "react";
import {
StyleSheet,
KeyboardAvoidingView,
View,
ActivityIndicator,
TouchableOpacity,
TextInput,
Text,
Image,
ImageBackground
} from "react-native";
import { LinearGradient } from "expo";
class Login extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.loginHeader}>
<LinearGradient colors={["#fdc830", "#ff9a00"]} style={{ flex: 1 }}>
<Image
source={require("../../../assets/logo-02.png")}
style={styles.image}
/>
</LinearGradient>
</View>
<Text>Login</Text>
</View>
);
}
}
export default Login;
const styles = StyleSheet.create({
container: {
top: 0,
flex: 3,
alignItems: "center"
},
loginHeader: {},
image: {}
});
The error which I was facing is
Invarient Violation:Element type is invalid: expected a string (for built-in-components) or a class/function (for composite components) but got:undefined. you likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports
I tried a lot to find a solution to this problem but I was unable to do so. Can you help me to find a solution to this problem It would be great? Thank you.
if you are using expo:34,35:
Add the package expo-linear-gradient and modify import to
import { LinearGradient } from 'expo-linear-gradient'
I am new to react native. I want to use 'react-native-camera'. I created a new project , installed the package correctly(I know because I have done it thrice to make sure that i'm not doing anything wrong) and it shows this error **Cannot read property 'oneOfType' of undefined ** and it is in index.js of this package 'react-native-camera'. I can't find any solution. I have tried changing gradle version, gradle wrapper properties everything that I could but this issue is not related to gradle. This is the code in my App.js. I know code isn't generating this error but i am new to react-native so maybe i'm missing something.
Any suggestion would be appreciated
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet
} from 'react-native';
import Camera from 'react-native-camera';
export default class BarcodeScan extends Component {
constructor(props) {
super(props);
this.state = {
qrcode: ''
}
}
onBarCodeRead = (e) => this.setState({qrcode: e.data});
render () {
return (
<View style={styles.container}>
<Camera
style={styles.preview}
onBarCodeRead={this.onBarCodeRead}
ref={cam => this.camera = cam}
aspect={Camera.constants.Aspect.fill}
>
<Text style={{
backgroundColor: 'white'
}}>{this.state.qrcode}</Text>
</Camera>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center'
}
});
Thanks to this guy , https://github.com/dwicao/react-native-panel/issues/4
I was able to solve this issue by replacing following in index.js of package 'react-native-camera'.
Replace
import React, { Component, PropTypes } from 'react';
with
import React, { Component } from 'react';
import PropTypes from 'prop-types';
In case someone finds this thread by searching on the the title (which I did), I will add my experience. Sometimes with TSX, imports get a little weird. What worked for me was using this import:
import * as PropTypes from 'prop-types'
I also need to do the same thing with React itself or it does not work either:
import * as React from 'react'
So far, these are the only two imports I need to do this for.
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.
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