I have tried all the options in react-native-router-flux like: navigationBarStyle or navTransparent and also
navigationBarStyle={[STYLES.navBar]}
all of these are not working while trying to make the custom navigation bar transparent Is there any ways to make it transparent using react-navigation and should I change from react-native-router-flux to react-navigation to do this I have posted it as an issue in Git Hub
here is the link :Github issue #2132
since I found it hard using react-navigation I have switched to RNRF is there any solution to make the custom navBar transparent other than switching from RNRF to RN or is it a bug in RN
here's the code that i use in my NavBar.js file :
import {
View, Image, StatusBar, TouchableWithoutFeedback
} from 'react-native';
import React, { Component } from 'react';
import { Actions } from 'react-native-router-flux';
class NavBar extends Component {
render() {
return (
<View style={styles.backgroundStyle}>
<StatusBar />
<View style={{ flexDirection: 'row' }}>
<TouchableWithoutFeedback onPress={() => Actions.pop()}>
<Image
source={require('./Images/back-arrow.png')}
style={styles.backarrowStyle} />
</TouchableWithoutFeedback>
<Image
source={require('./Images/help.png')}
style={styles.helpStyle} />
<Image
source={require('./Images/setting.png')}
style={styles.settingStyle} />
</View>
</View>
);
}
}
const styles = {
backgroundStyle: {
backgroundColor: 'transparent',
},
backarrowStyle: {
resizeMode: 'contain',
flexDirection: 'row',
width: 55,
height: 55,
left: 0,
justifyContent: 'flex-start'
},
helpStyle: {
resizeMode: 'contain',
width: 50,
height: 50,
left: 210,
justifyContent: 'flex-end',
position: 'relative'
},
settingStyle: {
resizeMode: 'contain',
width: 50,
height: 50,
justifyContent: 'flex-end',
position: 'relative',
left: 210
}
};
export default NavBar;
and this is my Router.js file:
import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import MainScreen from './components/MainScreen';
import ChallengeScreen from './components/ChallengeScreen';
import NavBar from './components/NavBar';
import Toss from './components/Toss';
const RouterComponent = () => {
return (
<Router>
<Scene key="root">
<Scene key="homeScreen" component={MainScreen} hideNavBar={1} />
<Scene
key="screen2" component={ChallengeScreen}
navBar={NavBar}
/>
<Scene
key="screen3" component={Toss}
navBar={NavBar}
/>
</Scene>
</Router>
);
};
export default RouterComponent;
What you can do is set semi-transparent navbar by setting navbar opacity in navigationBarStyle
<Scene key="scene2" component={ChallengeScreen}
navigationBarStyle={{opacity:0.3}}/>
but the problem is the whole navbar including left and right button will be inherit the opacity. I recommend just set hidenavbar={true} and implement custom navbar in the scene component. For eg: in Scene2 component (ChallengeScreen)
render() {
const customNavbar = {
<View style={{position:'absolute', top:0, flexDirection:'row', justifyContent:'space-between', backgroundColor:'transparent', padding:10}}>
<TouchableOpacity>
<Text>Left Button</Text>
</TouchableOpacity>
<Text>Title</Text>
<TouchableOpacity>
<Text>Right Button</Text>
</TouchableOpacity>
</View>
}
return () {
<View style={{flex:1}}>
{customNavbar}
<View></View>
</View>
}
}
Related
I'm having a problem getting my React Navigation to actually transition screens. I've used it successfully before and I cannot figure out what my problem is this time. I click my button and no transition happens. I think it might be a problem with the inline onPress not running....does it have to be in Main Button? Or does the inline code on App.js override anything in MainButton.js.
Also...NarScreen is the screen I'm trying to get to.
FILE 1: App.js
import 'react-native-gesture-handler';
import React from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { color } from 'react-native-reanimated';
import MainButton from './components/MainButton';
import NarScreen from './screens/NarScreen.js'
function HomeScreen({ navigation }) {
return(
<View style={styles.background}>
<View style={styles.logo}>
<Image source={require('./components/HNS1.png')} style={styles.image} resizeMode='contain' />
</View>
<View style={styles.buttons}>
<MainButton onPress={() => navigation.navigate('Nar')}>NAR Test</MainButton>
<MainButton>Tripoli Test</MainButton>
</View>
</View>
);
}
function Nar({ navigation }) {
return(
<NarScreen />
)
}
const Stack = createStackNavigator();
function App() {
return(
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Nar" component={Nar} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
background: {
backgroundColor: '#00629B',
flex: 1,
},
buttons: {
marginTop: "20%",
marginLeft: 10,
},
image: {
width: '80%',
height: 300,
borderRadius: 20,
},
logo: {
borderRadius: 200,
marginTop: '30%',
alignItems: 'center'
},
});
export default App;
File 2: NarScreen.js
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
const NarScreen = props => {
return(
<View>
<Text>BigScreen!</Text>
</View>
)
}
export default NarScreen;
FILE 3: MainButton.js
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity, } from 'react-native';
const MainButton = props => {
return <TouchableOpacity>
<View style={styles.button}>
<Text style={styles.buttonText}>{props.children}</Text>
</View>
</TouchableOpacity>
}
const styles = StyleSheet.create({
button: {
backgroundColor: "#FCD757",
paddingVertical: 30,
paddingHorizontal: 30,
height: 100,
width: 300,
marginTop: "10%",
borderRadius: 10,
marginLeft: '12%',
justifyContent: 'space-between',
},
buttonText: {
color: 'black',
fontSize: 26,
textAlign: 'center',
}
})
export default MainButton;
Inside your MainButton.js file, you are not handling onPress event. Add it to touchable opacity.
const MainButton = props => {
return <TouchableOpacity onPress={props.onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>{props.children}</Text>
</View>
</TouchableOpacity>
}
I'm experiencing trouble navigating between pages in my react native app. When I attempt to use the button, I get the following error message: TypeError: undefined is not an object (evaluating '_this.props.navigation') I have created my app using numerous js files, and id like to navigate between them using buttons. My App.js file renders to the WelcomeScreen from initializing.
import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import RecipesList from "cakeapp/app/screens/RecipesList.js";
import { ImageBackground, StyleSheet, View, Text, Button, navigation } from "react-native";
function WelcomeScreen(props) {
return (
<NavigationContainer>
<ImageBackground
style={styles.background}
source={require('cakeapp/app/assets/MainPage.png')}
>
<Text style={styles.text}>MyCakeRecipes</Text>
<View style={styles.homeButton}>
<Button
title="Recipes"
onPress={() => this.props.navigation.navigate('RecipesList')}
/>
</View>
</ImageBackground>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
background: {
flex:1,
justifyContent: "flex-end",
},
text: {
fontSize: 30,
fontWeight: "bold",
color: "white",
textAlign: "center",
bottom: 500,
},
homeButton: {
width: '100%',
height: 40,
backgroundColor: '#5f7f8a'
}
})
export default WelcomeScreen;
import React from 'react';
import { Image, ScrollView, View, Text, } from 'react-native';
const imageDis = {
width: 150,
height: 150
//flex:1,
//justifyContent: "flex-end"
};
const Recipes = () => (
<ScrollView style={{backgroundColor: '#5f7f8a'}}>
<Text style={{ fontSize: 20 }}>Chocolate Cake</Text>
<Image source={require('cakeapp/app/assets/Choc.png')} style={imageDis} />
<Text style={{ fontSize: 20 }}>Chocolate cupcake</Text>
<Image source={require('cakeapp/app/assets/ChocCu.png')} style={imageDis} />
<Text style={{ fontSize: 20 }}>Lemon Cake</Text>
<Image source={require('cakeapp/app/assets/Lemon.png')} style={imageDis} />
<Text style={{ fontSize: 20 }}>Lemom meringue</Text>
<Image source={require('cakeapp/app/assets/LemonM.png')} style={imageDis} />
<Text style={{ fontSize: 20 }}>Chocolate Berry</Text>
<Image source={require('cakeapp/app/assets/ChcoBerry.png')} style={imageDis} />
</ScrollView>
);
export default Recipes
As far as I know, < NavigationContainer> is used in app.js file to define the screens you want to navigate to. And you have to pass navigation as a prop to the component.
Your app.js file should look something like this
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Welcome"
component={WelcomeScreen}
/>
<Stack.Screen
name="Recipes"
component={RecipesList} />
</Stack.Navigator>
</NavigationContainer>
);
};
And your welcomeScreen like this:
const WelcomeScreen = ({ navigation }) => {
return (
<Button
title="RecipesList"
onPress={() =>
navigation.navigate('RecipesList')
}
/>
);
};
Let me know if it doesnt work
I am new to react-native. I tried to build a sound player for animals using a react-native sound player. I could successfully launch the Android App without any design issues. But I couldn't complete the iOS app due to a design issue.
This is the splash screen of the app. Big black top and bottom borders are covering the application. I want to remove these black borders.
Below is the App.js file of the application,
import React, {Component} from 'react';
import {createStackNavigator} from '#react-navigation/stack';
import {NavigationContainer} from '#react-navigation/native';
import SplashScreen from './src/screens/SplashScreen';
import HomeScreen from './src/screens/HomeScreen';
import AnimalCategory from './src/screens/AnimalCategory';
import Animal from './src/screens/Animals';
import {SafeAreaProvider} from 'react-native-safe-area-context';
const Stack = createStackNavigator();
export default class App extends Component {
render() {
return (
<SafeAreaProvider>
<NavigationContainer independent={true}>
<Stack.Navigator
initialRouteName="SplashScreen"
component={SplashScreen}
screenOptions={{headerShown: false}}>
<Stack.Screen
name="SplashScreen"
component={SplashScreen}
options={{headerShown: false}}
/>
<Stack.Screen
name="HomeScreen"
component={HomeScreen}
options={{headerShown: false}}
/>
<Stack.Screen
name="AnimalCategory"
component={AnimalCategory}
options={{headerShown: false}}
/>
<Stack.Screen
name="Animal"
component={Animal}
options={{headerShown: false}}
/>
</Stack.Navigator>
</NavigationContainer>
</SafeAreaProvider>
);
}
}
And this is the SplashScreen.js,
import React, {Component} from 'react';
import {View, Text, StyleSheet, Image, PermissionsAndroid} from 'react-native';
import ComponentStyles from '../../constant/Component.styles';
import {BG, CL} from '../../assets/images/index';
import {SafeAreaView} from 'react-native-safe-area-context';
export default class SplashScreen extends Component {
constructor(props) {
super(props);
}
async componentDidMount() {
setTimeout(() => {
this.props.navigation.replace('AnimalCategory');
}, 2000);
}
render() {
return (
<SafeAreaView
style={{
flex: 1,
justifyContent: 'space-between',
alignItems: 'center',
}}>
<Image source={BG} style={styles.bg} resizeMode="cover" />
<Text style={styles.text}>{'Powered By'}</Text>
<Image source={CL} style={styles.logo} resizeMode="contain" />
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
bg: {
position: 'absolute',
width: ComponentStyles.WIDTH,
height: ComponentStyles.HEIGHT,
},
logo: {
position: 'absolute',
width: ComponentStyles.WIDTH * 1,
height: ComponentStyles.HEIGHT * 0.1,
borderRadius: ComponentStyles.HEIGHT * 0.4,
bottom: 2,
alignSelf: 'center',
},
text: {
position: 'absolute',
fontSize: ComponentStyles.WIDTH * 0.05,
fontFamily: 'berkshireswash-regular',
bottom: 65,
alignSelf: 'center',
color: ComponentStyles.COLORS.BLACK,
},
});
Still couldn't figure out the issue for this design issue.
Do you have any idea?
Your view render item in splace screen I have changed safearea view design remove two properties from stylesheet
render() {
return (
<SafeAreaView
contentContainerStyle={{
flex: 1,
}}>
<Image source={BG} style={styles.bg} resizeMode="cover" />
<Text style={styles.text}>{'Powered By'}</Text>
<Image source={CL} style={styles.logo} resizeMode="contain" />
</SafeAreaView>
);
}
}
Also, change your image stylesheet bg
bg: {
flex: 1
width: ComponentStyles.WIDTH,
height: ComponentStyles.HEIGHT,
}
This is work for me I used style sheet of image like above code it works for me fine, hope this work for you
I tried several codes but I only have errors every time.
How to add images from my gallery (no links) one below the other, with text
at the top and bottom of each image?
Like this:
(source: noelshack.com)
import React, { Component } from "react";
import { Text, View, StyleSheet, Image, ImageBackground,ScrollView } from "react-native";
import withBackground from "../components/WithBackground";
class LinksScreen extends Component {
render() {
return (
<ScrollView>
<text>Hi</text>
<Image source={require('./assets/images/ici.jpg')} />
<text> Hello</text>
<text> Hi2</text>
<Image source={require('./assets/images/ici2.jpg')} />
<text> Hello2</text>
</ScrollView>
);
}}
export default withBackground(LinksScreen);
I am novice,
any help would be appreciated.
Can you give a screenshot of the result you are expecting?
There is something called a FlatList you can use that to achieve a list of images.
Note : menuData is an array of objects and Item is an object that has image title and URL
<FlatList
data={this.props.menuData}
renderItem={({ item }) => {
return(
<View style={{ flexDirection: 'row' }}>
<Image source={require(item.imageURL)} />
<Text>{item.imageText}</Text>
</View>
);
}}
keyExtractor={(item) => item.title }
/>
Use this style for Text:
textStyle: {
flex: 1,
width: '100%',
position: 'absolute',
alignSelf: 'center',
backgroundColor: 'rgba(0.57, 0.57, 0.57, 0.3)',
height: '100%',
}
I am going to show you a possibility of working with native-base, but it's just a suggestion. You can see some possibilities in the official docs: https://docs.nativebase.io/Components.html#Components
import React, { Component } from 'react';
import { Image, ImageBackground, View } from 'react-native';
import { Card, CardItem, Text, Left, Right } from 'native-base';
import styles from './styles';
class ProductImage extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<ImageBackground
style={ styles.image }
source={{ uri: this.props.photo }}
>
</ImageBackground>
</View>
);
}
}
export default ProductImage
So if you want to put a photo without props, it's just put the link image, like 'https://www.w3schools.com/w3css/img_lights.jpg'. Don't forget to install the dependence: npm install native-base --save
Can you try this once:
<ScrollView>
<View>
<Text>Hi</Text>
<Image source={require('./assets/snack-icon.png')} style={{ width: '100%',
height: 150, marginBottom: 10, padding: 10 }} resizeMode="cover" />
</View>
<View>
<Text> Hi2</Text>
<Image source={require('./assets/snack-icon.png')} style={{ width: '100%',
height: 150, marginBottom: 10, padding: 10 }} resizeMode="cover" />
<Text> Hello2</Text>
</View>
</ScrollView>
I just wanted to add an <ImageBackground> to my React Native project, but I always get the error message: "TypeError: undefined is not an object (evaluating style.width)". Error located at ImageBackground (at index.js:31).
I have another project where it works perfectly like this. Could it be a problem of the React Native version?
import React, {Component} from 'react'
import {
StyleSheet,
View,
TouchableOpacity,
Text,
AsyncStorage,
Dimensions,
ImageBackground
} from 'react-native'
import * as Colors from '../../themes/colors'
import {getNavigationOptions} from '../../utils/navigation'
import * as ducks from '../../ducks'
import {connect} from 'react-redux'
class LoginScreen extends Component{
login(){
const {updateCurrentUser} = this.props
updateCurrentUser({name: 'Mauricio'})
console.log('login', this.props.currentUser)
}
olvidarContraseña(){
console.log('olvidar contraseña')
}
render(){
return (
<View style={styles.container}>
<View style={[styles.input, {borderColor: Colors.primary}]}>
<ImageBackground>
style={styles.backgroundImage}
source={require('./trigo_background.jpg')}>
{/* <TouchableOpacity
style={styles.btnSubmit}
onPress={() => this.login()}
>
<Text style={{textAlign: 'center', color: Colors.primary}}>
Iniciar Sesión
</Text>
</TouchableOpacity> */}
</ImageBackground>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
backgroundImage: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
position: 'absolute',
top: 0,
left: 0
},
btnSubmit: {
justifyContent: 'center',
padding: 10,
flexDirection: 'row'
},
input: {
height: 40,
paddingHorizontal: 10,
borderWidth: 1,
borderRadius: 5
}
})
LoginScreen.navigationOptions = ({navigation}) =>
getNavigationOptions('Login', Colors.primary, 'white')
const mapStateToProps = store => ({
currentUser: store.currentUser
})
const mapDispatchToProps = {
updateCurrentUser: ducks.updateCurrentUser
}
export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen)
The error is in your code snippet
<ImageBackground> <== Here
style={styles.backgroundImage}
source={require('Valcereal/assets/trigo_background.jpg')}>
{/* <TouchableOpacity
style={styles.btnSubmit}
onPress={() => this.login()}
>
<Text style={{textAlign: 'center', color: Colors.primary}}>
Iniciar Sesión
</Text>
</TouchableOpacity> */}
</ImageBackground>
You've closed the tag and adding lines of code after it which would throw an error since it is not valid jsx
The correct code is
<ImageBackground
style={styles.backgroundImage}
source={require('Valcereal/assets/trigo_background.jpg')}>
{/* <TouchableOpacity
style={styles.btnSubmit}
onPress={() => this.login()}
>
<Text style={{textAlign: 'center', color: Colors.primary}}>
Iniciar Sesión
</Text>
</TouchableOpacity> */}
</ImageBackground>
At the top of your file destructor the height and width property like
const { width, height } = Dimensions.get('window');
In our styles object replace BackgroundImage object with
backgroundImage: {
width: width,
height: height,
position: 'absolute',
top: 0,
left: 0
},
Another alternative to setting a backgroundImage in React native is to set the height and width to 100%.
backgroundImage: {
width: 100%,
height: 100%,
},
Despite the wrong format you have provided, you'll also get the same results/error.
so the style of ImageBackground should be like this:
{ width: undefined, height: undefined }
Provided in the doc's of react-native ImageBackground