I have looked everywhere and can't figure out why my background image isn't working the path is fine and I've tried everything from wrapping it in a view, giving it a width and height. None of it works. I'm new to react native so I don't know is this a common problem. The login button shows up just fine it is purely the bg image.
Here is the code:
import React from "react";
import { ImageBackground, StyleSheet, Image, View } from "react-native";
function WelcomeScreen(props) {
return (
<View>
<ImageBackground
style={styles.background}
source={require("../assets/background.jpg")}
>
<View style={styles.loginButton}></View>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
background: {
flex: 1,
},
loginButton: {
width: "100%",
height: 70,
backgroundColor: "#fc5c65",
},
});
Well adding a style to the view that contains the background image seemed to work. If anyone else has this issue update your code to look like this.
import React from "react";
import { ImageBackground, StyleSheet, Image, View } from "react-native";
function WelcomeScreen(props) {
return (
<View style={styles.container}>
<ImageBackground
source={require("../assets/background.jpg")}
style={styles.background}
>
<View style={styles.loginButton}></View>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
},
background: {
flex: 1,
resizeMode: "cover",
},
loginButton: {
width: "100%",
height: 70,
backgroundColor: "#fc5c65",
},
});
import React from "react";
import { ImageBackground, StyleSheet, Image, View } from "react-native";
function WelcomeScreen(props) {
return (
<View style={styles.background}>
<ImageBackground
style={styles.background}
source={require("../assets/background.jpg")}
>
<View style={styles.loginButton}></View>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
background: {
flex: 1,
},
loginButton: {
width: "100%",
height: 70,
backgroundColor: "#fc5c65",
},
});
Related
I am fairly new to react native, but I have some experience. I am creating my own app for both ios and android by following along a tutorial that I had already completed and making my own modifications. As I was in the middle of creating an app, I forgot to add a background image. After struggling with this for several days, I'm desperate, so I decided to ask my question on here.
I am trying to add the background image to my App.js file. The image loads properly, but my page content ( which is inside <LifelineNavigator />) is either hidden or has disappeared for android. And for ios, the content seems to be in a small centered flexbox. Also, I am trying to remove the white background.
Any suggestions would definitely help. Thanks so much! God bless!
Here is my code:
import React, { useState } from "react";
import { StyleSheet, View, ImageBackground } from "react-native";
import * as Font from "expo-font";
import AppLoading from "expo-app-loading";
import { enableScreens } from "react-native-screens";
import LifelineNavigator from "./src/navigation/LifelineNavigator";
enableScreens();
const fetchFonts = () => {
return Font.loadAsync({
"Gotham-Medium": require("./src/assets/fonts/Gotham-Font/Gotham-Medium.otf")
const image = {
uri: "https://i.ibb.co/8z6QbTS/Lifeline-Gradient-Background-24.png",
};
const App = () => {
const [fontLoaded, setFontLoaded] = useState(false);
if (!fontLoaded) {
return (
<AppLoading
startAsync={fetchFonts}
onFinish={() => setFontLoaded(true)}
onError={(err) => console.log(err)}
/>
);
}
return (
<View >
<ImageBackground source={image} style={styles.image}>
<View style={ styles.container }>
<LifelineNavigator />
</View>
</ImageBackground>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
// backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
image: {
width: "100%",
height: "100%" ,
}
});
export default App;
IOS Screenshot
Android Screenshot
import React from "react";
import { ImageBackground, StyleSheet, Text, View } from "react-native";
const image = { uri: "https://reactjs.org/logo-og.png" };
const App = () => (
<View style={styles.container}>
<ImageBackground source={image} resizeMode="cover" style={styles.image}>
<Text style={styles.text}>Inside</Text>
</ImageBackground>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
flex: 1,
justifyContent: "center"
},
text: {
color: "white",
fontSize: 42,
lineHeight: 84,
fontWeight: "bold",
textAlign: "center",
backgroundColor: "#000000c0"
}
});
export default App;
follow this documentation > https://reactnative.dev/docs/imagebackground
it may solve your problem
I am getting unnecessary space but I want to start my code from the very top. I want to make header of my own or be able to customize the 'gray' region. How to do it? Pls check the attached picture
I am attaching code and picture alongwith.
Phone Screen Image
App.js code-
import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import Header from './components/Header';
export default function App() {
return (
<View style={styles.screen}>
<Header title="I am Header" />
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
},
});
Header.js code-
import React from 'react';
import {Text, View, StyleSheet} from 'react-native';
const Header = (props) => {
return (
<View style={styles.header}>
<Text style={styles.headerTitle}>{props.title}</Text>
</View>
);
};
const styles = StyleSheet.create({
header: {
width: '100%',
height: 90,
backgroundColor: 'yellow',
alignItems: 'center',
justifyContent: 'center',
},
headerTitle: {
color: 'black',
fontSize: 18,
},
});
export default Header;
I have an input that is cutt off at the top. Is it possible to have it aligned directly under the black bar without writing specific margins/padding for it? If I take off the padding the element completely dissapears from the screen
import React, { Component } from 'react';
import {View, TextInput, StyleSheet, Dimensions } from 'react-native';
export default function IndoorFOrm() {
const [value, onChangeText] = React.useState('Useless Placeholder');
return (
<View style={styles.container}>
<TextInput
style={styles.button}
onChangeText={text => onChangeText(text)}
value={value}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: 35,
backgroundColor: '#ecf0f1',
},
button:{
borderRadius: 4,
borderWidth: 2,
width: 100,
height: 40,
borderColor: 'red',
backgroundColor: "rgb(72, 120, 166)",
}
});
SafeAreaView does not work on Android, I generally do this.
import React from 'react';
import { Platform, StyleSheet } from 'react-native';
const styles = new StyleSheet.create({
screenPadding: {
paddingTop: Platform.OS === 'android' ? 25 : 0,
}
});
Try using StatusBar.currentHeight which gives the Status Bar height in Android.
import React, { Component } from 'react';
import {View, TextInput, StyleSheet, Dimensions, StatusBar } from 'react-native';
export default function IndoorFOrm() {
const [value, onChangeText] = React.useState('Useless Placeholder');
return (
<View style={styles.container}>
<TextInput
style={styles.button}
onChangeText={text => onChangeText(text)}
value={value}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
height: StatusBar.currentHeight,
backgroundColor: '#ecf0f1',
},
button:{
borderRadius: 4,
borderWidth: 2,
width: 100,
height: 40,
borderColor: 'red',
backgroundColor: "rgb(72, 120, 166)",
}
});
Using SafeAreaView
import React, { Component } from 'react';
import {View, TextInput, StyleSheet, Dimensions } from 'react-native';
import SafeAreaView from 'react-native-safe-area-view';
export default function IndoorFOrm() {
const [value, onChangeText] = React.useState('Useless Placeholder');
return (
<View style={styles.container}>
<SafeAreaView>
<TextInput
style={[styles.button, {paddingTop: insets.top}]}
onChangeText={text => onChangeText(text)}
value={value}
/>
</SafeAreaView>
</View>
);
}
Link: https://github.com/react-native-community/react-native-safe-area-view
add 'react-native-safe-area-context' to your project and then
import {SafeAreaView} from 'react-native-safe-area-context'
now use this particular <SafeAreaView></SafeAreaView> to wrap your view should work perfectly on iOS and android
I'm using react-native-circular-action-menu for popout navigation buttons. On iPhone it looks as expected (note the circle buttons):
But on Android it's being constrained into a box:
Here is the relevant code for this component:
import React, { Component } from 'react';
import {
View,
StyleSheet,
Text,
Image,
Dimensions
} from 'react-native';
import colors from '../../../styles/colors';
import formStyles from '../../../styles/formStyles';
import ActionButton from 'react-native-circular-action-menu';
import Icon from '../../../assets/components/svgIcons.js';
import { connect } from 'react-redux';
import * as actions from '../../../actions';
import apiHelper from "../../../utils/api";
import { NavigationActions, StackNavigator } from 'react-navigation';
class ProfileCircleNav extends Component {
renderImage() {
return(
<Image
source={require("../../../assets/images/LexodyL.png")}
style={{height: 70, width: 70}}
/>
)
}
renderButton() {
if(!this.state.blocked) {
return(
<View style={{minHeight: 200, width: 350}}>
<ActionButton
buttonColor={colors.rgbaGreen}
outRangeScale={.5}
btnOutRange={colors.halfGreen}
bgColor={'transparent'}
position={"right"}
radiua={200}
icon={this.renderImage()}
onPress={this.props.onPress}
style={{zIndex: 12}}
>
<ActionButton.Item buttonColor={'transparent'} title="Request Lex" onPress={() => {this.createMeeting()}}>
<View style={styles.actionButton}>
<Icon
name='Calendar'
strokeWidth="3"
stroke={'#fff'}
fill={'#fff'}
/>
<Text style={formStyles.textStandard}>Schedule</Text>
<Text style={formStyles.textStandard}>Lex</Text>
</View>
</ActionButton.Item>
<ActionButton.Item buttonColor={'transparent'} style={styles.actionButtonIcon} title="Chat" onPress={() => this.startConvo()}>
<View style={styles.actionButton}>
<Icon
name='Chat'
strokeWidth="3"
stroke={'#fff'}
fill={'#fff'}
/>
<Text style={formStyles.textStandard}>Chat</Text>
</View>
</ActionButton.Item>
</ActionButton>
</View>
)
}
}
render() {
return (
<View style={{
bottom: Dimensions.get('window').height*.50,
backgroundColor: 'transparent',
}}>
{this.renderButton()}
</View>
);
}
}
const styles = StyleSheet.create({
actionButtonIcon: {
height: 500,
fontSize: 50,
},
actionButton: {
backgroundColor: colors.green,
height: 100,
width: 100,
borderRadius: 50,
alignItems: 'center',
justifyContent: 'center',
}
});
const mapStateToProps = (state) => {
return {
currentUser: state.currentUser
}
}
export default connect(mapStateToProps, actions)(ProfileCircleNav);
I've been trying to figure this out for hours - what am I missing here? Why is it a square on Android?
so the issue you have is that height here has no effect.
actionButtonIcon: {
height: 500,
fontSize: 50,
},
what you have to do is use the prop size to ActionButton.Item. I think a size bigger or equal than the borderRadius of 100 you are trying to apply.
<ActionButton.Item buttonColor={'transparent'} size={100} title="Request Lex" onPress={() => {this.createMeeting()}}>
Here is a working example: https://snack.expo.io/ByG7nsVwQ
You can see the prop used in the code right here
I wrote a simple React Native app which shall display four colored rectangles. The app runs well but app is showing only a blank white screen. I replaced the content of the render function with just a text, that is displayed properly. What is going wrong?
Code provided below:
index.android.js:
import React, { Component } from 'react';
import { Text,
AppRegistry,
StyleSheet,
View
} from 'react-native';
import Mainscreen from './components/screens/mainscreen.js';
class styling extends Component {
render() {
return (
<View>
<Mainscreen />
</View>
);
}
}
AppRegistry.registerComponent('styling', () => styling);
Mainscreen.js:
import React,{Component} from 'react';
import {View, StyleSheet} from 'react-native';
export default class Mainscreen extends Component{
render(){
return (
<View style={styles.container}>
<View style={styles.smallContainer}>
<View style={styles.above}>
<View style={styles.leftAbove}></View>
<View style={styles.rightAbove}></View>
</View>
<View style={styles.bottom}>
<View style={styles.leftBottom}></View>
<View style={styles.rightBottom}></View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor: 'black',
flexDirection:'column'
},
above:{
flex:1,
flexDirection:'row',
marginTop: 10,
marginLeft: 10,
marginBottom: 10,
marginRight: 10
},
bottom:
{
flex:1,
flexDirection:'row',
marginTop: 10,
marginLeft: 10,
marginBottom: 10,
marginRight: 10
},
leftAbove:{
backgroundColor: 'green',
flex: 0.6,
},
rightAbove:{
backgroundColor: 'red',
flex: 0.4,
},
leftBottom:{
backgroundColor: 'blue',
flex: 0.4,
},
rightBottom:{
backgroundColor: 'yellow',
flex: 0.6,
},
smallContainer:{
flex:1,
padding: 10,
backgroundColor:'black'
}
});
Give flex: 1 to your View in styling component (everything else is fine) as follows:
class styling extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<Mainscreen />
</View>
);
}
}
notice the style of flex: 1 in top level view component. It is necessary to tell the view to take the full-screen width and height. Otherwise, height and width will be 0.