I want to set an background image to my app. When I run expo start the image dosen't show.
this its my component:
import React from "react";
import { StyleSheet, Text, View, ImageBackground } from "react-native";
import { Asset } from "expo-asset";
export default function App() {
return (
<View style={styles.container}>
<ImageBackground
source={{
uri: Asset.fromModule(require("./images/background.png")).uri,
}}
style={styles.image}
></ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
image: {
flex: 1,
resizeMode: "cover",
justifyContent: "center",
},
});
what I missed? I appreciate any help
According to the react native documentation:
"Note that you must specify some width and height style attributes."
https://reactnative.dev/docs/imagebackground
Related
i am a beginner in react-native, i follow tutorials on youtube to make projects. i am trying to make an expo ui-app, but each screens has a title on the top like this:
There is the word Explore above the screen, and each other screens has the corresponding title above it aswell. Is there a way to remove this? because i followed tutorials from youtube but they didnt have this title.
Here is the Explore.js file:
import { StyleSheet, Text, View, SafeAreaView, TextInput, Platform, StatusBar } from 'react-native';
import React, { Component } from 'react';
import { Ionicons } from '#expo/vector-icons';
class Explore extends Component {
componentWillMount() {
this.startHeaderHeight = 80
if(Platform.OS == 'android')
{
this.startHeaderHeight = 100 + StatusBar.currentHeight
}
}
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<View style={{ height: this.startHeaderHeight, backgroundColor: 'white', borderBottomWidth: 1, borderBottomColor: '#dddddd' }}>
<View style={{flexDirection: 'row', padding: 10, backgroundColor: 'white', marginHorizontal: 20, shadowOffset:{width:0,height:0}, shadowColor: 'black', shadowOpacity: 0.2, elevation: 1, marginTop: Platform.OS == 'android' ? 30 : 20 }}>
<Ionicons name="ios-search" size={20} color="black" />
<TextInput
underlineColorAndroid="transparent"
placeholder='Try Indonesia'
placeholderTextColor="grey"
style={{ flex: 1, fontWeight: '700', backgroundColor: 'white', marginLeft: 10 }}
/>
</View>
</View>
</View>
</SafeAreaView>
);
}
}
export default Explore;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
and here is my app.js file:
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { Ionicons } from '#expo/vector-icons';
import { FontAwesome5 } from '#expo/vector-icons';
import Explore from './screens/Explore';
import Saved from './screens/Saved';
import Trips from './screens/Trips';
import Inbox from './screens/Inbox';
const Tab = createBottomTabNavigator();
export default function BottomTabs() {
return (
<NavigationContainer>
<..... CODE OF THE BOTTOM TAB NAVIGATOR IN HERE .....>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
David Scholz's solution is good for individual screens. If you want to disable the header on all child screens of a navigator, you can use
screenOptions={{ headerShown: false }}
as a prop on the Tab.Navigator, or any top-level navigator.
You could hide the header using the options={{headerShown: false}} prop as follows.
const Tab = createBottomTabNavigator();
export default function BottomTabs() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Test" options={{
headerShown: false
}}/>
</Tab.Navigator>
</NavigationContainer>
);
}
I am fairly new to React Native and am struggling to get this page to show up when importing it to App.js. It was working by itself, but once I tried to clean things up and put the code into its own file and just call upon it, things went south.
To break things down;
Welcome.js contains the code of a "welcome page" I am trying to create
App.js is the default file created that basically just calls Welcome
and GetStartedButton is just the code of a button that is imported into Welcome but I dont think its necessary to provide.
When running App.js I am not receiving any errors, my screen is just white!
Thank you for any help, I appreciate it more than you know. I apologize for my ignorance!
It wouldnt surprise me if it was just another typo.
I am sure my code is horrible btw! Assuming my styles were an interesting way to do things! Learning...
Welcome.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import GetStarted from './src/components/GetStartedButton';
export default class Welcome extends Component {
render() {
return (
<View style={styles.containerMain}>
<View style={styles.containerClub}>
<Text style={styles.title}>Word</Text>
</View>
<View style={styles.containerCaption}>
<Text style={styles.caption}> Words Words Words </Text>
</View>
<View style={styles.containerBottom}>
<GetStarted text='Get Started' color='#E50061' />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
containerMain: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
},
containerClub: {
position: 'absolute',
bottom: 288
},
containerCaption: {
position: 'absolute',
bottom: 250
},
/* To style the button and positioning*/
containerBottom: {
position: 'absolute',
bottom: 100
},
/* To style "Word"*/
title: {
fontSize: 35,
fontWeight: "bold",
},
/* To style "Words Words Words"*/
caption:
{
fontSize: 16
}
}
)
App.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import Welcome from './src/pages/Welcome';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Welcome/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
}
);
GetStartedButton.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
const GetStarted = props => {
const content = (
<View style={[styles.button, {backgroundColor: props.color}]}>
<Text style={styles.text}>{props.text}</Text>
</View>
)
return <TouchableOpacity onPress={props.onPress}>{content}</TouchableOpacity>
}
const styles = StyleSheet.create({
button: {
padding: 20,
width: 340,
borderRadius: 8,
alignItems: 'center',
},
text: {
color: 'white',
fontSize: 20,
justifyContent: 'center',
alignItems: 'center',
}
});
export default GetStarted;
The problem is in your Welcome component styles. You colored your texts white, so... it is all white.
const styles = StyleSheet.create({
// (...)
/* To style "word"*/
title: {
color: 'white', // remove it!
fontSize: 35,
fontWeight: "bold",
},
/* To style "words words words"*/
caption:
{
color: 'white', // remove it!
fontSize: 16
}
#edit
Also you did not apply your styles in your App component. It should look like this:
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Welcome/>
</View>
)
}
}
Try changing backgroundColor to something else other than white like
containerMain: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
},
I have written simple React Native app which shall display two background on first screen which one is overlay on one another.The app runs but it showing only a blank white screen. I have imported the login.js files from './src/components/login' in the App.js files but its not showing anything in screen beside white color?
Do I need to install any other dependency to connect with imported .js files in react-native? I am using the react-native-cli: 2.0.1
react-native: 0.57.8 and tools for android studio 3.2.
.src/components/login
import React, { Component } from 'react';
import { AppRegister, StyleSheet, Text, View, Image } from 'react-native';
export default class Login extends Component {
render() {
return (
<View style = {styles.container}>
<View style = {styles.backgroundContainer}>
<Image style = {styles.backdrop} source = {require('../../images/vape.jpg')} resizeMode = 'cover'/>
</View>
<View style = { styles.overlay}>
<Image
style={styles.logo}
source={require('../../images/smoke.jpg')}/>
<Text style={styles.title}>Ada Smoke Shop</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
alignItems: 'center',
},
backgroundContainer: {
flex:1,
position: 'absolute',
top:0,
bottom:0,
left:0,
right:0
},
overlay: {
opacity: 0.5,
backgroundColor: '#000000',
flexDirection: 'column',
top:100
},
logoContainer: {
alignItems: 'center',
flexGrow: 1,
justifyContent: 'center',
},
logo: {
backgroundColor: '#000000',
top:150,
left: 50,
width: 200,
height: 200
},
backdrop: {
flex:1,
},
title: {
color: '#B03A2E',
marginTop:150,
width:300,
height:300,
fontSize: 30,
fontStyle: 'italic',
fontFamily: 'Baskerville',
textAlign: 'center',
opacity: 10
},
});
App.js
import React, { Component } from 'react';
import { AppRegister, StyleSheet, Text, View, Image } from 'react-native';
import login from './src/components/login';
export default class App extends Component {
render() {
return (
<View style = {styles.container}>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
alignItems: 'center'
}
});
Login component is imported, but not used. Your render in App.js should be something like this:
render() {
return (
<View style = {styles.container}>
<Login />
</View>
);
}
I can't see why the placeholder won't show up on both of the <TextInput>'s. Also, when the user types something, nothing shows up in those <TextInput> boxes. I would like to know why this is happening.
Here is App.js:
import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import BackGround from './components/BackGround';
export default class App extends Component {
render() {
return(
<View style={styles.back}>
<BackGround/>
</View>
);
}
}
const styles = StyleSheet.create({
back: {
flex: 1
}
});
Here is Login.js:
import React, {Component} from 'react';
import {StyleSheet, TextInput, View, Text, TouchableOpacity} from 'react-native';
class Login extends Component {
render() {
return(
<View>
<TextInput
placeholder={"Email"}
placeholderTextColor={"#E365F4"}
style={styles.input}
/>
<TextInput
placeholder={"Password"}
placeholderTextColor={"#f44242"}
style={styles.input}
/>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Login</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Create Account</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
input: {
backgroundColor: 'green',
paddingBottom: 20,
padding: 20,
paddingHorizontal: 150,
marginBottom: 10
},
loginAndCA: {
fontSize: 40,
textAlign: 'center',
color: 'white',
fontFamily: 'Bodoni 72 Smallcaps'
}
});
export default Login;
Here is BackGround.js:
import React, {Component} from 'react';
import {StyleSheet, Image, View} from 'react-native';
import Login from './Login';
export default class BackGround extends Component {
render() {
return(
<View style={styles.first}>
<Image style={styles.container} source={require('../pictures/smoke.jpg')}>
<View style={styles.second}>
<Login/>
</View>
</Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: null,
height: null,
backgroundColor: 'rgba(0,0,0,0)',
resizeMode: 'cover'
// resizeMode: 'contain' // Shows image completely.
},
first: {
flex: 1
},
second: {
paddingTop: 290 // Moves both <TextInput> boxes down.
}
});`
Three issues here and it's all dealing with your styling.
By using paddingBottom: 20 and padding: 20, you are effectively reducing what can be shown in the TextInput into a sliver (if even that). To compensate for that, you need to adjust the height as well.
When you do adjust height, you may run into this double height issue. I don't know if that has since been fixed, but take a look at it if you are still seeing issues.
Lastly, paddingHorizontal: 150 pushes it too far horizontally making nothing appear. Reduce that to something much smaller like paddingHorizontal: 15.
Why do my images not appear when I run the application on my mobile device? I've simply followed this tutorial and added a few lines of code: https://facebook.github.io/react-native/docs/getting-started.html.
import React, {
Component
} from 'react';
import {
AppRegistry,
Image,
StyleSheet,
Text,
View
} from 'react-native';
var MOCKED_MOVIES_DATA = [
{title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];
export default class AwesomeProject extends Component {
render() {
var movie = MOCKED_MOVIES_DATA[0];
return (
<View style={styles.container}>
<Text>{movie.title}</Text>
<Text>{movie.year}</Text>
<Image source={{uri: movie.posters.thumbnail}} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
Image appears when the width and height properties are set.
<Image style={{width: 60, height: 60}} source={{uri: movie.posters.thumbnail}} />
Try https instead http. It could be the main problem.