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>
)
}
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
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,
},
I'm trying to update an app I've developed using react-navigation v4.
Using react-navigation v4 I could get the id using something like console.log(navigation.getParam('id'));
But when I tried the same after updating to v5 of react-navigation it shows me an error and I can't find the right way to get the param id
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function ShowScreen({ navigation }) {
console.log(navigation.getParam('id'));
return (
<View style={styles.container}>
<Text>Show Screen</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
The other screen where the id is located is it:
import React, { useContext } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { FlatList, TouchableOpacity } from 'react-native-gesture-handler';
import { Context } from '../../context/BlogContext';
import Icon from 'react-native-vector-icons/Feather'
export default function IndexScreen({ navigation }) {
const { state, addBlogPost, deleteBlogPost } = useContext(Context);
return (
<View style={styles.container}>
<Button
title="Add Post"
onPress={addBlogPost}
/>
<FlatList
data={state}
keyExtractor={(blogPost) => blogPost.title}
renderItem={({ item }) => {
return (
<TouchableOpacity onPress={
() => navigation.navigate('ShowScreen',
{ id: item.id })}>
<View style={styles.row}>
<Text style={styles.title}>
{item.title} -
{item.id}
</Text>
<TouchableOpacity onPress={() => deleteBlogPost(item.id)}>
<Icon style={styles.icon}
name="trash"
/>
</TouchableOpacity>
</View>
</TouchableOpacity>
);
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 30,
justifyContent: 'center',
alignItems: 'center'
},
row: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 10,
paddingVertical: 20,
borderTopWidth: 1,
borderColor: '#333'
},
title: {
fontSize: 18
},
icon: {
fontSize: 24
}
});
You can get params using route.params in react navigation v5 more on that read here
just update your code to this
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function ShowScreen({ navigation,route }) {
const {id} =route.params; //you will get id here via route
return (
<View style={styles.container}>
<Text>Show Screen</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
you can simply access your parameters like this
const id = this.props.route.params.id
inside this.props.route.params you will get all paramaters :)
I have the following view in a React Native app:
And this is the code for it:
index.js
import React, {useContext} from 'react';
import {View, StyleSheet} from 'react-native';
import {Headline, Button, IconButton} from 'react-native-paper';
import ShoppingCartEntry from './ShoppingCartEntry';
import ShoppingCartContext from '../../context/shoppingCart/shoppingCartContext';
const ShoppingCartList = () => {
const {shoppingCart} = useContext(ShoppingCartContext);
const TotalPriceDisplay = () => {
let totalPrice = 0;
shoppingCart.map((entry) => {
totalPrice = totalPrice + (entry.product.price * entry.amount);
})
return (
<Headline>Total: {totalPrice}</Headline>
)
}
return (
<View style={styles.cartContainer}>
<View style={styles.icon}>
<IconButton icon='cart' color='black' size={40}/>
</View>
{shoppingCart.map((entry) => {
return (
<ShoppingCartEntry entry={entry} />
)
})}
<View style={styles.totalPrice}>
<TotalPriceDisplay />
<Button mode='contained'>
Comprar
</Button>
</View>
</View>
)
}
styles = StyleSheet.create({
cartContainer: {
flexDirection: 'column',
},
totalPrice: {
alignItems: 'center'
},
icon: {
alignItems: 'center'
}
})
export default ShoppingCartList;
ShoppingCartEntry.js
import React, {useContext} from 'react';
import {View, StyleSheet} from 'react-native';
import {Headline, IconButton, Text} from 'react-native-paper';
import ShoppingCartContext from '../../context/shoppingCart/shoppingCartContext';
const ShoppingCartEntry = ({entry}) => {
const {shoppingCartAppendProduct, shoppingCartUpdateProduct, shoppingCartRemoveProduct} = useContext(ShoppingCartContext);
const removeProduct = () => {
shoppingCartRemoveProduct(entry.product.id);
}
const Counter = () => {
return (
<View style={styles.counterContainer}>
<View style={styles.counter}>
<IconButton icon='plus' color='black' onPress={removeProduct} />
</View>
<View>
<Headline color='blue'>{entry.amount}</Headline>
</View>
<View style={styles.counter}>
<IconButton icon='minus' color='black' onPress={removeProduct} />
</View>
</View>
)
}
return (
<View style={styles.entryContainer}>
<View style={styles.button}>
<IconButton icon='delete' color='red' onPress={removeProduct} />
</View>
<View style={styles.name}>
<Headline>{entry.product.name}</Headline>
<Text>{entry.product.price}</Text>
</View>
<View style={styles.amount}>
<Counter />
<Text style={{textAlign: 'right'}}>{entry.product.price * entry.amount}</Text>
</View>
</View>
)
}
styles = StyleSheet.create({
entryContainer: {
flexDirection: 'row',
paddingBottom: 20,
paddingLeft: 20
},
name: {
flex: 0.5
},
amount: {
flex: 0.3
},
button: {
alignItems: 'flex-end',
flex: 0.1
},
counterContainer: {
flexDirection: 'row'
},
counter: {
alignItems: 'flex-end',
justifyContent: 'center',
flexDirection: 'row'
}
})
export default ShoppingCartEntry;
The problem is that when an element is removed from shoppingCart and the whole view is re rendered, it looses all its formatting:
I discovered that all I have to do is to change the StyleSheet.flexDirection for the container from row to column and, then, back to row again, and the view gets arranged again, but now with the new data.
I don't know if this is a development stage issue that I shouldn't care about for production, or if there is something I can do to avoid it.
You should add flex:1 to your base container styles for both your list and your item.
...
entryContainer: {
flex:1,
flexDirection: 'row',
paddingBottom: 20,
paddingLeft: 20
},
...
cartContainer: {
flex:1,
flexDirection: 'column',
},
I am an beginner in react native.I want to display home page after logged in.I have install react-navigator using npm install and I have tried below code.
But I am getting below error, I tried to solve this. Still I have the error.
In App.js
//This is an example code for Bottom Navigation//
import React, { Component } from 'react';
//import react in our code.
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
//import all the basic component we have used
import { createStackNavigator, createAppContainer } from 'react-navigation';
export default class App extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ marginTop: 50, fontSize: 25 }}>Setting!</Text>
<View
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity
style={styles.button}
onPress={() => this.props.navigation.navigate('Two')}>
<Text>Go to Home Tab</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => this.props.navigation.navigate('Two')}>
<Text>Open Detail Screen</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => this.props.navigation.navigate('Two')}>
<Text>Open Profile Screen</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
width: 300,
marginTop: 16,
},
});
Can anyone assist me to solve this?
You can do it as following:
import React from "react";
import { View, Text } from "react-native";
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
</View>
);
}
}
class LoginScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Login Screen</Text>
<Button
title="Go to Home"
onPress={() => this.props.navigation.navigate('Home')}
/>
</View>
);
}
}
on App.js,
import React from 'react';
import { HomeScreen, LoginScreen } from '..'// should set the proper path.
const AppNavigator = createStackNavigator({
Login: LoginScreen,
Home: HomeScreen
});
const App = () => {
return <AppNavigator />;
}
export default App;