There is a button at the bottom that when I click I want it to change the background color of the pink containers. How do I make it work, linking the button to the container?
import ListCar from './ListCar';
import {useState} from 'react';
export default function App() {
const [color, setColor] = useState(true);
const toggle=()=>{
setColor(!color);
}
return
<StatusBar style="light"/>
<View style={{ maxheight:10, backgroundColor: "lightgrey" }}>
<Button onPress={toggle} classname={'container'} title="Change Background"></Button>
</View>
</SafeAreaView>
);
}
export default ListCar = (props) => {
return(
<View style={styles.container}>
<View>
<Image source={require("./bmw.jpg")} style={{width:150, height:150, resizeMode:'contain'}}/>
)
}
const styles = StyleSheet.create({
container:{
backgroundColor: 'pink',
marginTop: 20,
flexDirection: 'row',
padding:5,
},
Related
I tried to show images and people's names using loops.
import { StyleSheet, Text, View, SafeAreaView, ScrollView } from 'react-native'
import React from 'react'
import Header from './home/Header'
import Stories from './home/Stories'
import Posts from './home/Posts'
import { POSTS } from '../data/posts'
const HomeScreen = () => {
return (
<SafeAreaView style={styles.container}>
<Header></Header>
<ScrollView>
<Stories></Stories>
{POSTS.map((post, index) => (
<Posts post={post} key={index}/>
))}
</ScrollView>
</SafeAreaView>
)
}
export default HomeScreen
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'black'
},
});
This is the one that has a problem.
import { Image, StyleSheet, Text, View } from 'react-native'
import {Divider} from 'react-native-elements'
import React from 'react'
const Posts = ({post, index}) => {
return (
<View stlye={styles.conatiner}>
<Divider width={1} orientation='vertical'></Divider>
<PostHeader post={post} key={index}/> <--- this part not show up
</View>
)
};
const PostHeader = ({post, index}) => {
<View style={{flexDirection: 'row', justifyContent: 'space-between', margin: 5, alignContent: 'center'}} key={index}>
<View>
<Image source={{ uri: post.profile_pictrue}} style={styles.story}/>
<Text style={{color: 'white'}}>{post.user.user}</Text>
</View>
</View>
};
const styles = StyleSheet.create({
conatiner: {
marginBottom: 30
},
story: {
width: 35,
height: 35,
borderRadius: 50,
marginBottom: 10,
borderWidth: 2,
borderColor: 'orange'
},
});
export default Posts
But the divider is working. And, there is no error log.
I don't understand what have I done wrong.
you need to wrap with return
const PostHeader = ({post, index}) => {
return( <View style={{flexDirection: 'row', justifyContent: 'space-between', margin: 5, alignContent: 'center'}} key={index}>
<View>
<Image source={{ uri: post.profile_pictrue}} style={styles.story}/>
<Text style={{color: 'white'}}>{post.user.user}</Text>
</View>
</View>)
};
hope it's working fine
I want after press on the FloatingButton, to show 2 more buttons.
While I have these 2 buttons shown, I want to make the rest of this page to be uncklickable,
that the user has to press one of these to go on navigating.
This is my code:
import React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import FloatingButton from '../components/FloatingButton';
const DuellScreen = () => {
return (
<View style={{ flex: 1 }}>
<ScrollView style={styles.container2}>
<Text style={{ flex: 1 }}>body</Text>
</ScrollView>
<View style={styles.container}>
<FloatingButton/>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
padding: 16,
flex: 1,
backgroundColor: '#fff',
justifyContent: 'flex-end',
alignItems: 'center'
},
container2: {
padding: 16,
flex: 5,
backgroundColor: '#fff',
},
});
export default DuellScreen
How can I do this, especially the 2 button visible after buttonpress + make the other things unclickable?
how about this:
import React, { useState } from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import FloatingButton from '../components/FloatingButton';
const DuellScreen = (props) => {
const [active, setActive] = useState(true);
return (
<View style={{ flex: 1 }}>
<ScrollView style={styles.container2}>
<Text style={{ flex: 1 }}>body</Text>
</ScrollView>
<View style={styles.container}>
<FloatingButton onPress={active ? () => setActive(false) : () => {} } />
{!active ?
<View>
<FloatingButton onPress={() => props.navigation.navigate('OtherScreen')} />
<FloatingButton onPress={() => props.navigation.navigate('AnotherScreen')} />
</View>
: null}
</View>
</View>
)
}
I am using react navigation to navigate between different screens.
below is my code:
import React from 'react';
import { StyleSheet, Text, View, Button, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import Home from "./screen/Home";
function Main({ navigation }) {
return (
<View style={styles.container}>
<View style={{flex: 0}}>
<Text>Welcome</Text>
</View>
<View style={{flex: 0}}>
<TouchableOpacity style={styles.btn} onPress={() => navigation.navigate('Home')}>
<Text>Goto Home</Text>
</TouchableOpacity>
</View>
</View>
);
}
const MainNavigator = createStackNavigator();
export default class App extends React.Component {
render() {
return (
<NavigationContainer>
<MainNavigator.Navigator >
<MainNavigator.Screen name="Main" component={Main} />
<MainNavigator.Screen name="Home" component={Home} />
</MainNavigator.Navigator>
</NavigationContainer>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1, backgroundColor: '#44210D', alignItems: 'center', justifyContent: 'center',
},
text: {
color: "black", borderWidth: 2, borderColor: "green"
},
btn: {
alignItems: "center", backgroundColor: "#DDDDDD", padding: 10,margin: 10
},
});
You can see in the image that there is a white space at the top. I want to know how can I change the color of that space.
I am working on a react native application and am trying to understand how to deal with react navigation as it affects my styling. Essentially when I navigate to a page, react navigation's top arrow with header is displacing my components (I'd like to move my black header bar up and use react navigation's arrow ideally):
I have react navigation set up in the following manner:
App.js
const ProfileNavigator = createStackNavigator({
//Profile: { screen: Profile},
QR: { screen: GenerateQR },
EditAccount: { screen: EditAccount }
});
const AppNavigator = createSwitchNavigator({
tabs: bottomTabNavigator,
profile: ProfileNavigator
})
const AppContainer = createAppContainer(AppNavigator);
I have a header component I put together for styling that I use on top of each page:
pageTemplate
import React, {Component} from 'react';
import {Text,View, StyleSheet} from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { Ionicons } from '#expo/vector-icons';
class PageTemplate extends Component {
render() {
return (
<View
style={{
flexDirection: 'row',
height: 130,
alignSelf: 'stretch',
width: '100%'
}}>
<View style={{backgroundColor: 'black', alignSelf: 'stretch',width: '100%'}} />
<View style=
{{position:'absolute',
marginTop: '16%',
marginLeft: '3%',
display: 'flex',
flexDirection: 'row',
flex:1
}}>
<TouchableOpacity onPress={this.props.navigate}>
<Ionicons name="ios-arrow-dropleft" size={32} color="white" />
</TouchableOpacity>
</View>
<Text
style={{
position: 'absolute',
marginTop: '15%',
marginLeft: '12%',
color: 'white',
fontSize: 30}}
>
{this.props.title}
</Text>
</View>
);
}
}
export default PageTemplate;
I have a tab called profile which navigates through a list item to get to an account edits page:
Profile
import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, TouchableHighlight } from 'react-native';
import { Ionicons } from '#expo/vector-icons';
import { List, ListItem } from 'react-native-elements'
import GenerateQR from './generateQR';
import PageTemplate from './smallComponents/pageTemplate';
import pic from '../assets/bigRate.png'
export default class Profile extends React.Component {
render() {
const { navigate } = this.props.navigation;
navigateBack=()=>{
navigate('Queue')
}
return(
<React.Fragment>
<PageTemplate title={'Profile Settings'} navigate={navigateBack} />
{/*<Image source={pic} />*/}
{/** Frst Section */}
<View style={{
//backgroundColor:'blue'
}}>
<Text style={styles.section}>Account Information</Text>
</View>
<TouchableOpacity
onPress={()=>{navigate('EditAccount')}}
style={{position: 'absolute',
marginTop:'32%',
flex:1,
flexDirection: 'row',
flexWrap: 'wrap'}}>
<View style={{
marginLeft:'5%',
flex:1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'flex-start',
//backgroundColor:'yellow',
alignItems: 'center',
//borderRadius:50,
//height:'60%'
}} >
<Ionicons style={{marginLeft:'20%'}} name="ios-person" size={72} />
</View>
<View style={{paddingTop:50,
marginRight:'40%',
flex:2,
flexDirection: 'row',
flexWrap: 'wrap',
//backgroundColor: 'red'
}}
>
<Text>Sylvester Stallone</Text>
<Text>+1 646-897-0098</Text>
<Text>SlyLone#gmail.com</Text>
</View>
</TouchableOpacity>
{/**add line section */}
</React.Fragment>
);
}
}
const styles = StyleSheet.create({
option : {
//position: 'absolute',
marginLeft:'7%',
alignSelf: 'stretch',
width: '100%',
height: '15%',
//flexWrap: 'wrap',
justifyContent:'space-between',
//padding:20
},
section : {
fontSize:20,
marginLeft:'5%'
}
})
/**
*
*
*
<View style={styles.option}>
<Ionicons name="ios-gift" size={32} />
<TouchableHighlight>
<Text>Rewards</Text>
</TouchableHighlight>
</View>
*
*/
Ideally it be nice to drop the arrow icon and move the header up keeping react-navigations arrow.
If you want to get rid of the arrows, you can create your own headers.
Example
class LogoTitle extends React.Component {
render() {
return (
<Image
source={require('#expo/snack-static/react-native-logo.png')}
style={{ width: 30, height: 30, alignSelf:"center" }}
/>
);
}
}
class HomeScreen extends React.Component {
static navigationOptions = {
// headerTitle instead of title
headerTitle: () => <LogoTitle />,
headerLeft: () => (
<Button
onPress={() => alert('This is a button!')}
title="back"
color="#fff"
/>
),
};
I have a Header component which looks like this :
When I try to import this to another component, its spreading to the whole screen. I tried to pass style props and change the height but it isn't working.
In the Header.js
import React, { Component } from 'react';
import { View, StyleSheet, Dimensions, Text, Navigator } from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';
const h = Dimensions.get('window').height;
const w = Dimensions.get('window').width; //360
export default class Header extends Component{
render(){
return(
<View style = {[styles.headerStyle, this.props.style]}>
<View style={styles.icon}>
<MaterialCommunityIcons.Button iconStyle={styles.icon} backgroundColor="#FDA74A" name="cart-outline" size={25} />
</View>
<View style={styles.icon}>
<FontAwesome.Button iconStyle={styles.icon} backgroundColor="#FDA74A" name="comment-o" size={25} />
</View>
<View style={styles.icon}>
<MaterialIcons.Button iconStyle={styles.icon} backgroundColor="#FDA74A" name="notifications-none" size={25} />
</View>
<View style={styles.icon}>
<MaterialIcons.Button iconStyle={styles.icon} backgroundColor="#FDA74A" name="help-outline" size={25} />
</View>
<View style={styles.menuStyle}>
<SimpleLineIcons.Button backgroundColor="#FDA74A" name="menu" size={25} onPress={() => this.props.navigation.navigate('DrawerOpen')} underlayColor="#FDA74A"/>
</View>
<View style = {styles.headerTextViewStyle}>
<Text text={this.props} style={styles.headerTextStyle}>{this.props.text}
</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
menuStyle: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
},
headerStyle:{
backgroundColor: '#FDA74A',
flex: 1,
width: w,
height:h/5,
flexDirection: 'row-reverse',
},
icon:{
marginRight:0,
marginLeft:0
},
headerTextStyle:{
position:'absolute',
justifyContent: 'space-between',
fontSize: 28,
color: '#FFFFFF',
margin: 0.045*w,
},
headerTextViewStyle:{
flexDirection:'column-reverse'
}
});
In the Wallet.js(where I want this Header)
import React, { Component } from 'react';
import {Text, View, StyleSheet, Dimensions} from 'react-native';
import Header from './Header';
const h = Dimensions.get('window').height;
const w = Dimensions.get('window').width;
export default class Wallet extends Component {
constructor(props){
super(props);
this.state = {};
}
render() {
return (
<View style= {styles.containerStyle}>
<Header style={styles.headerStyle}
text="Your Wallet" />
</View>
);
}
}
const styles = StyleSheet.create({
containerStyle:{
flex:1,
backgroundColor:'white',
},
headerStyle:{
height:h/5,
},
});
See this Header Image --> Header
I want a common Header just like shown in the image throughout the application for all of the screens. Please let me know if you know how to do it ?
This is caused due to flex. If you notice, you're using flex: 1 in both the components. Adding a child component other than header in Wallet.js with greater flex value e.g flex: 3 or flex: 4 (as per your app UI) may solve the issue.
UPDATE
All you have to do is add another component/View in Wallet.js
render() {
return (
<View style= {styles.containerStyle}>
<Header
style={styles.headerStyle}
text="Your Wallet"
/>
<View style={{flex:4}}>
<Text style: {{fontSize: 18}}>
Replace your main/body component instead of this view
</Text>
</View>
</View>
);
}