I am creating a custom picker in RN and want the picker to appear from the bottom of the screen
Below is the image which shows how it is appearing currently.
Consider this as my code for the current Picker component (child Component)
import React, {useState} from 'react'
import PropTypes from 'prop-types'
import {View, Picker, StyleSheet, Dimensions} from 'react-native'
const styles = StyleSheet.create({
pickerDefault:{
flex: 1,
position: 'absolute',
width: Dimensions.get('window').width,
bottom: 0
}
})
const RNPicker = (props) => {
return (
<Picker
selectedValue={'js'}
style={styles.pickerDefault}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
)
}
RNPicker.propTypes = {
}
export default RNPicker
How can I make Picker stick to the bottom of the screen.?
This is how I am rendering code (won't prefer to change this code) in the parent component
<View style={{backgroundColor: backgroundViewColor, height: '100%'}}>
<Spinner
visible={Loading} />
<ProgressBar {...ProgressBarProps} />
<View style={styles.renderComponentView}>
<Text style={[{color: defaultColor}, styles.textStyling, textStyle]}> {label}</Text>
{CustomPicker}
{ Error.status ? (<Text style={[styles.subText, styles.errorColor, helperTextStyle]}>{Error.message}</Text>): null }
<Text style={[styles.subText, errorStyle]}>{helper}</Text>
<TouchableOpacity
style={[{borderColor: defaultColor, color: defaultColor}, styles.customButton]}
onPress={getValueFromState}
>
<Text style={[{borderColor: defaultColor, color: defaultColor},styles.buttonText, buttonTextStyle]}> {usedButtonText} </Text>
</TouchableOpacity>
</View>
</View>
I saw your problem and I am trying to solving it please try this :
<View style={{ position: "absolute", bottom: 0, flex: 1 }}>
{< CustomPicker/>}
</View>
by replacing your {customPicker}
Related
I have installed nativeWind on the project, it only works correctly on the main HomeScreen.js, it is not showing th changes anywhere else. These are my project files:
HomeScreen.js:
import { SafeAreaView, View, Text, Image, Platform, StatusBar, StyleSheet, TextInput, ScrollView } from 'react-native'
import { useLayoutEffect } from 'react'
import { useNavigation } from '#react-navigation/native'
import { AdjustmentsVerticalIcon, ChevronDownIcon, MagnifyingGlassIcon, UserIcon} from "react-native-heroicons/outline";
import { flex } from 'react-native-wind/dist/styles/flex/flex';
import Categories from '../Components/Categories';
const HomeScreen = () => {
const navigation = useNavigation();
useLayoutEffect( () => {
navigation.setOptions({
headerShown: false,
})
}, []);
return (
<SafeAreaView className='pt-8 bg-white'>
<Text className='text-red-500\'>
{/* Header */}
<View className='flex-row items-center pb-3 mx-4 space-x-2 px-4'>
<Image
source={{
uri: 'https://links.papareact.com/wru'
}}
className='h-9 w-9 bg-gray-300 p-4 rounded-full pt-3'
/>
<View className="#00CCBB">
<Text className='font-bold text-gray-400 text-xs'>Deliver now!</Text>
<Text className='font-bold text-xl'>Current Location
<ChevronDownIcon size={20} color="#00CCBB" />
<UserIcon size={35} color='#00CCBB'/>
</Text>
</View>
</View>
</Text>
{/* Search */}
<View className='flex-row items-center space-x-2 pb-2 mx-4 px-2'>
<View className=' items-center flex-row space-x-2 bg-gray-200 p-3 flex-1'>
<MagnifyingGlassIcon color="gray" size={20}/>
<TextInput placeholder="Restraunts and cuisines" keyboardType="default"/>
</View>
<AdjustmentsVerticalIcon height={30} width={30} color='#00CCBB'/>
</View>
{/* Body */}
<ScrollView
className='bg-gray-100'
contentContainerStyle={{
paddingBottom: 100,
}}>
{/* Categories */}
<Categories />
{/* Featured rows */}
</ScrollView>
</SafeAreaView>
)
}
export default HomeScreen
Categories.js:
import { ScrollView, Text } from 'react-native'
import React from 'react'
import CardForCategories from './CardForCategories'
const Categories = () => {
return (
<ScrollView
contentContainerStyle={{
paddingHorizontal: 15,
paddingTop: 10,
}}
horizontal
showsHorizontalScrollIndicator={false}>
{ /* CategoryCard */ }
<CardForCategories title={"Meh 1 "} imgUrl="https://links.papareact.com/wru"/>
<CardForCategories title={"Meh 2 "} imgUrl="https://links.papareact.com/wru"/>
<CardForCategories title={"Meh 3 "} imgUrl="https://links.papareact.com/wru"/>
</ScrollView>
)
}
export default Categories
CardForCategories.js:
import { TouchableOpacity, Text, Image } from 'react-native'
import React from 'react'
const CardForCategories = ({imgUrl , title}) => {
return (
<TouchableOpacity className='relative mr-2'>
<Image source={{
height:80,
width:80,
uri: imgUrl,
}}
className='rounded-full' />
<Text className='text-red-500'>{title}</Text>
</TouchableOpacity>
);
};
export default CardForCategories
The code works just fine on the HomeScreen.js file, but it doesn't work anywhere else, such as the CardForCategories.js, it doesn't show the changes
When I try and scroll to the bottom of my React Native screen it just goes back to the top after letting go. I've tried adding a flex of 1 to the parents of the ScrollView, but that didn't fix the issue, and neither did adding a bottom padding.
What could be causing this behavior?
import {
View,
Text,
SafeAreaView,
StyleSheet,
TextInput
TouchableOpacity,
ScrollView,
} from 'react-native';
import React, {useState} from 'react';
export default function SelectAddress() {
return (
<View style={styles.mainView}>
<SafeAreaView>
<View style={{minHeight: '100%'}}>
<ScrollView>
<View>
<TextInput style={styles.input} placeholder="Street address" />
<TextInput style={styles.input} placeholder="Apt/Suite/Bldg" />
<TextInput style={styles.input} placeholder="City" />
<TextInput style={styles.input} placeholder="State" />
<TextInput style={styles.input} placeholder="Zipcode" />
</View>
<TouchableOpacity style={styles.save}>
<Text>Save</Text>
</TouchableOpacity>
</ScrollView>
</View>
</SafeAreaView>
</View>
);
}
const styles = StyleSheet.create({
mainView: {
height: Dimensions.get('screen').height,
width: Dimensions.get('screen').width,
backgroundColor: '#ffffff',
},
input: {
paddingTop: 15,
paddingBottom: 15,
borderRadius: 12,
paddingLeft: 10,
minWidth: '95%',
marginTop: 10,
},
save: {
alignSelf: 'center',
padding: 6,
marginTop: 10,
borderRadius: 20,
},
});
please check the expo, its not happening there, you can share an expo too.
https://snack.expo.dev/#gaurav1995/amused-ramen
i use react native paper radio button but it shows the text on the left and the radio button on the right like: "Text ✓",
i want the button to be on the left and the text on the right
i want it to be: "✓ Text"
this is my code below
<RadioButton.Group
onValueChange={handleChange('i_am')}
value={values.i_am}
>
<RadioButton.Item
label="1"
value="1"
color="#1E6DAD"
/>
<RadioButton.Item
label="2"
value="2"
color="#1E6DAD"
/>
</RadioButton.Group>
The solution is by using flexDirection =>
<RadioButton.Item
label="1"
value="1"
color="#1E6DAD"
style={{ flexDirection: 'row-reverse', alignSelf: 'flex-start' }}
/>
<RadioButton.Group
onValueChange={()=>handleChange(//here set the value of "1" or "2")}
value={values.i_am}
>
<RadioButton.Item
label="1"
value="1"
color="#1E6DAD"
/>
<RadioButton.Item
label="2"
value="2"
color="#1E6DAD"
/>
</RadioButton.Group>
You can customize it like this by using your own custom views.
Here is the code example.
import * as React from "react";
import { View, StyleSheet } from "react-native";
import { RadioButton, Text } from "react-native-paper";
const MyComponent = () => {
const [value, setValue] = React.useState(1);
return (
<RadioButton.Group
onValueChange={(newValue) => setValue(newValue)}
value={value}
>
<View style={styles.buttonContainer}>
<RadioButton value={1} />
<Text style={styles.label}>1</Text>
</View>
<View style={styles.buttonContainer}>
<RadioButton value={2} />
<Text style={styles.label}>2</Text>
</View>
</RadioButton.Group>
);
};
const styles = StyleSheet.create({
buttonContainer: {
flexDirection: "row",
alignItems: "center",
},
label: { flex: 1, textAlign: "right", marginRight: 16 },
});
export default MyComponent;
It will be shown like this
I hope this help you out
I've been trying to make a simple app, and I want some comment section that I create with flatlist, but after I create some component below my flatlist it won't appear, but the height of it appears, it just the component itself won't appear, after I'm trying to comment my flatlist, the component below it showed up.
Can you give me solution for this problem? so stuck with it
<View
style={{
alignItems: 'center',
flex: 1,
}}>
<FlatList
data={Comment}
keyExtractor={Comment.id}
renderItem={renderItem}
removeClippedSubviews={true}
scrollEnabled={false}
/>
</View>
</View>
<View>
<Timeline data={data} />
</View>
</View>
<!-- end snippet -->
Try this way
<View style={{ flex: 1 }}>
<View
style={{
alignItems: "center",
flex: 1,
}}
>
<FlatList
data={Comment}
keyExtractor={Comment.id}
renderItem={renderItem}
removeClippedSubviews={true}
scrollEnabled={false}
/>
</View>
<View>
<Timeline data={data} />
</View>
</View>
In my react native project I have custom drawer with screens like screen1 and screen2. Screen1 is used for stack navigator and in Screen 2 it contains tab navigator. How to enable this kind of nesting navigation.
I am using react navigation 5 in order to build custom drawer.
Here is my code:
import { DrawerContentScrollView, DrawerItem } from "#react-navigation/drawer";
.............
render = () => {
<DrawerContentScrollView {...props}>
<View style={styles.menuContainer}>
<View style={[styles.menuItemsCard, { backgroundColor: "#fff2df" }]}>
<View style={[styles.circleContainer, { backgroundColor: "#FFC56F" }]}>
<Icon travel name="suitcase" type="font-awesome" color="#fbae41" />
</View>
<DrawerItem
label="Screen1"
labelStyle={{ color: "#fbae41", fontSize: 10 }}
onPress={() => {
props.navigation.navigate("PatientInfo");
}}
/>
</View>
<View style={[styles.itemCard, { backgroundColor: "#EFFFD5" }]}>
<View style={[styles.circleContainer, { backgroundColor: "#b5ff39" }]}>
<Icon Medical name="briefcase" type="font-awesome" color="#609806"></Icon>
</View>
<DrawerItem
label="Screen2"
labelStyle={{ color: "#609806" }}
onPress={() => {
props.navigation.navigate("Diagnose");
}}
/>
</View>
</View>
</DrawerContentScrollView>
}
mainNaviagtor:
const MainNavigator = () => {
return (
<Drawer.Navigator drawerContent={props => <Menu {...props} />} drawerStyle={{ width:
"100%" }}>
<Stack.Screen name="Screen1" component={PatientInfoScreen} screenOptions={headerOptions} />
<Stack.Screen name="Screen2" component={DiagnoseScreen} /> //Here i need tab navigator
</Drawer.Navigator>
);
};
My older code: (react navigation 4.x)
createDrawerNavigator(
{
Screen1: {
screen: createStackNavigator(
{
PatientInfo: { screen: PatientInfoScreen }
},
headerOptions
)
},
Screen2: {
screen: createBottomTabNavigator({
Diagnose: {
screen: diagnoseNavigation
},
Causes: { screen: causeNavigation },
})
},
})
Output:
How should I solve this issue? I also referred to the https://reactnavigation.org/docs/nesting-navigators/.
Any one please help me to solve this issue.
Working Example: Expo Snack
Final Output:
Full source Code:
import * as React from 'react';
import {
View,
Text,
StyleSheet,
useWindowDimensions,
Button,
} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { Feather } from '#expo/vector-icons';
import { createStackNavigator } from '#react-navigation/stack';
import {
createDrawerNavigator,
DrawerContentScrollView,
DrawerItemList,
DrawerItem,
} from '#react-navigation/drawer';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
function TabNav() {
return (
<Tab.Navigator>
<Tab.Screen
name="TabOne"
component={() => (
<View style={styles.container}>
<Text>TabOne</Text>
</View>
)}
/>
<Tab.Screen
name="TabTwo"
component={() => (
<View style={styles.container}>
<Text>TabTwo</Text>
</View>
)}
/>
</Tab.Navigator>
);
}
const StackNav = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Feed" component={Feed} />
<Stack.Screen name="Article" component={Article} />
</Stack.Navigator>
);
};
function CustomDrawerContent(props) {
const width = useWindowDimensions().width * 0.3;
return (
<DrawerContentScrollView {...props}>
<View style={styles.menuContainer}>
<View
style={[
styles.menuItemsCard,
{ backgroundColor: '#fff2df', width: width, height: width },
]}>
<>
<View
style={[styles.circleContainer, { backgroundColor: '#FFC56F' }]}>
<Feather travel name="briefcase" size={25} color="#fbae41" />
<DrawerItem
label="Screen1"
labelStyle={{ color: '#fbae41', fontSize: 10 }}
onPress={() => {
props.navigation.navigate('Screen1');
}}
/>
</View>
</>
<DrawerItem
style={{
position: 'absolute',
left: 0,
width: width,
height: width,
}}
label="Screen2"
labelStyle={{ color: '#609806' }}
onPress={() => {
props.navigation.navigate('Screen1');
}}
/>
</View>
<View
style={[
styles.menuItemsCard,
{ backgroundColor: '#EFFFD5', width: width, height: width },
]}>
<View
style={[styles.circleContainer, { backgroundColor: '#b5ff39' }]}>
<Feather Medical name="briefcase" size={25} color="#609806" />
</View>
<DrawerItem
style={{
position: 'absolute',
left: 0,
width: width,
height: width,
}}
label="Screen2"
labelStyle={{ color: '#609806' }}
onPress={() => {
props.navigation.navigate('StackNav');
}}
/>
</View>
</View>
</DrawerContentScrollView>
);
}
function MyDrawer() {
return (
<Drawer.Navigator
drawerContent={(props) => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Screen1" component={StackNav} />
<Drawer.Screen name="StackNav" component={TabNav} />
</Drawer.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyDrawer />
</NavigationContainer>
);
}
function Feed({ navigation }) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Feed Screen</Text>
<Button
title={'Article'}
onPress={() => navigation.navigate('Article')}
/>
</View>
);
}
function Article({ navigation }) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Article Screen</Text>
<Button title={'Feed'} onPress={() => navigation.navigate('Feed')} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
menuContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-evenly',
},
menuItemsCard: {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10,
},
circleContainer: {
width: 50,
height: 50,
borderRadius: 25,
padding: 10,
},
});