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'
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>
I'm trying to add a logo to react-native code using Image tag but after I add Image tag it gives me below error
TypeError: (0, _reactNative.default) is not a function. (In '(0, _reactNative.default)("./../assets/logo.png")', '(0, _reactNative.default)' is an instance of Object)
* component\Login.js:12:34 in render
- node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:11581:21 in finishClassComponent
- node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:11509:4 in updateClassComponent
- ... 18 more stack frames from framework internals
below is my code
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Image from "react-native";
import require from 'react-native'
import {ImageBackground} from "react-native";
export default class Login extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.logoContainer}>
<Image sorce={require('./../assets/logo.png')}/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
logoContainer:{
alignItems:'center',
justifyContent:'center',
},
});
my App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Login from './component/Login'
export default function App() {
return (
<View style={styles.container}>
<Login/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
so what is wrong here?
You have a wrong Image import.
Use it like this:
import { StyleSheet, Text, View, Image } from 'react-native';
const myImageSource = require('./../assets/logo.png'); // Double check that you have the image at that path
Fix the typo from image source:
<Image source={myImageSource}/>
If still not working add full content of your files and RN version to your question.
React native simulator gives the error
"Invariant Violation: Element type is invalid: expected a string( for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
App.js
import React, { Component } from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
NavigatorIOS,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import SearchPage from './SearchPage';
export default class App extends Component<{}> {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Property Finder',
component: SearchPage,
}}/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
SearchPage.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
Button,
ActivityIndicator,
Image,
} from 'react-native';;
export default class SearchPage extends Component<{}> {
render() {
return (
<View style={styles.container}>
<Text style={styles.description}>
Search for houses to buy!
</Text>
<Text style={styles.description}>
Search by place-name or postcode.
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
description: {
marginBottom: 20,
fontSize: 18,
textAlign: 'center',
color: '#656565'
},
container: {
padding: 30,
marginTop: 65,
alignItems: 'center'
},
});
Could someone tell the problem in it.
Using react-native version: 0.61
the error you met often occurs when you likely forgot to export your component from the file it’s defined in. I see your code it is done.
I run your code. it shows NavigatorIOS is removed from the library. and I think that it caused by NavigatorIOS, it is only working on ios and deprecated. you should use 'react-native-navigationorreact-native-router-flux' and I suggest you use react-native-router-flux.
if use the react-native-router-flux, you can look at the following code:
const App = () => (
<Router>
<Stack key="root">
<Scene key="search" component={SearchParge} title="search" />
</Stack>
</Router>
// then, if you want to go to it
Actions.search()
);
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'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.