I'm making a tabNavigator with a tabScreen like this:
<Tab.Screen
name="ListingEdit"
component={ListingEditScreen}
options={({navigation}) => ({
tabBarButton: () => (
<NewListButton
onPress={() => navigation.navigate('ListingEdit')}></NewListButton>
),
tabBarIcon: ({size, color}) => (
<MaterialCommunityIcons
name="plus-circle"
size={size}
color={color}></MaterialCommunityIcons>
),
})}
/>
and NewListButton component:
<View style={styles.container}>
<MaterialCommunityIcons name="plus-circle" color={colors.white} size={25} />
</View>
Everything looks good, but after wrapping NewListButton with a TouchableOpacity
<TouchableOpacity onPress={onPress}>
<View style={styles.container}>
<MaterialCommunityIcons name="plus-circle" color={colors.white} size={25} />
</View>
</TouchableOpacity>
the NewListButton component is partially hidden like this
I tried adding the zIndex but it didn't work. Is there anyone had the same problem before, I hope your help, thanks so much !
My container style:
const styles = StyleSheet.create({
container: {
backgroundColor: colors.primary,
borderRadius: 35,
height: 70,
width: 70,
bottom: 30,
borderColor: colors.white,
borderWidth: 10,
alignItems: 'center',
justifyContent: 'center'
}
});
Have you tried to put the TouchableOpacity inside the View?
<View style={styles.container}>
<TouchableOpacity onPress={onPress}>
<MaterialCommunityIcons name="plus-circle" color={colors.white}
size={25}></MaterialCommunityIcons>
</TouchableOpacity>
</View>
or try to add the {styles.container} to TouchableOpacity
Related
I have a list of items inside a flatlist with numeric inputs of each one of them as follows
My code for the flatlist is as follows:
const BedRoomModal = () => {
return (
<View style={{flex: 1}}>
<ScrollView>
<Text style={Styles.headerText}>Bedroom 1</Text>
<View style={Styles.container}>
<FlatList
data={bedData.BED}
renderItem={renderItem}
keyExtractor={(item) => item.BED_ID}
/>
</View>
</ScrollView>
<TouchableOpacity
onPress={() => BedRoomSave()}
style={{
alignSelf: 'flex-end',
right: 5,
position: 'absolute',
bottom: 10,
}}>
<View
style={{
backgroundColor: '#20B2AA',
alignSelf: 'flex-end',
padding: 10,
}}>
<Text style={{fontSize: 15, fontWeight: 'bold', color: '#fff'}}>
SAVE
</Text>
</View>
</TouchableOpacity>
</View>
);
};
renderItem is as follows:
const renderItem = ({item,index}) => {
return (
<>
<View
style={{
marginBottom: 24,
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<Text style={Styles.checklistTitle}>{item.BED_TITLE}</Text>
<NumericInput
value={bed[index]}
onChange={(value) => bedDataFunction(value,index)}
totalWidth={100}
totalHeight={35}
iconSize={22}
step={1}
valueType="integer"
textColor="#B0228C"
iconStyle={{color: 'black'}}
rightButtonBackgroundColor="#fff"
leftButtonBackgroundColor="#fff"
minValue={0}
/>
</View>
<View style={Styles.itemSeparator}></View>
</>
);
};
bedDataFunction:
const bedDataFunction=(value,id)=>{
console.log('VALUE')
console.log(value)
console.log('ID')
console.log(id)
}
The states that I have used are:
const [bed, setBed] = useState([]);
I get the value inside the console of my onchange function but now I need to take that value and display it on screen? could anyone tell what am I doing wrong here?
Any suggestion would be welcomed, am stuck since long now, hopefully would recieve help, thank you.
Let me know if anything is required for better understanding of the code.
I'm new to React Native and as well to Animations in React Native. What I'm trying to do is to fill the checkbox in it's pressed but the way I did made all the checkboxes fill when I press the Touchable Opacity.
the 'color' value is defined by this
const color = useRef(new Animated.Value(0)).current;
I don't know if this is the best way. I searched through the documentation and saw something like this.
const {
clean,
tasks,
getTasksList,
edited,
toogleEdited,
deleteList,
} = useContext(listContext);
const { taskEdited } = useContext(taskContext);
const [listName, setListName] = useState("");
const screenHeight = Math.round(Dimensions.get("window").height);
const colors = useRef(
Array.from({ length: tasks.length }).fill(new Animated.Value(0))
);
async function getListName() {
setListName(await AsyncStorage.getItem("listName"));
}
async function asyncGetTasks() {
await getTasksList();
}
useEffect(() => {
getListName();
asyncGetTasks();
}, [edited, taskEdited]);
return (
<View style={styles.container}>
<StatusBar hidden />
<View style={styles.buttonsContainer}>
<TouchableOpacity
onPress={() => {
clean();
navigation.goBack();
}}
>
<MaterialIcons name="arrow-back" size={32} />
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
deleteList();
clean();
navigation.goBack();
}}
>
<MaterialIcons name="delete" size={32} color="#bc0000" />
</TouchableOpacity>
</View>
<View style={styles.titleContent}>
<Text style={styles.titleText}>{listName}</Text>
</View>
<ScrollView style={{ height: screenHeight }}>
{tasks.length > 0 ? (
tasks.map((item, index) => (
<TouchableOpacity key={index} style={styles.task}>
<View style={{ flexDirection: "row" }}>
<TouchableOpacity
style={{ alignSelf: "center", marginRight: 8 }}
onPress={() => {
console.log(colors.current[index]);
Animated.timing(colors.current[index], {
toValue: 1,
duration: 1000,
}).start();
toogleEdited();
}}
>
<Animated.View
style={{
borderColor: "#000",
borderWidth: 3,
borderRadius: 100,
}}
>
<Animated.View
style={{
backgroundColor: "#000",
height: 22,
width: 22,
borderRadius: 100,
opacity: colors.current[index],
}}
nativeID={item._id}
></Animated.View>
</Animated.View>
</TouchableOpacity>
<View>
<Text style={styles.taskText}>{item.title}</Text>
</View>
</View>
<Animated.View
style={{
position: "absolute",
alignItems: "center",
alignContent: "center",
opacity: 0.5,
alignSelf: "center",
}}
>
<Text
style={{
color: "#000",
opacity: 0,
fontSize: 32,
}}
>
Done!!
</Text>
</Animated.View>
</TouchableOpacity>
))
) : (
<View style={styles.emptyContent}>
<Text style={styles.emptyText}>This list don't have tasks yet</Text>
</View>
)}
</ScrollView>
<TouchableOpacity
style={{
position: "absolute",
top: screenHeight - 120,
right: 28,
flexDirection: "row",
width: 50,
alignSelf: "flex-end",
}}
onPress={() => navigation.navigate("NewTask")}
>
<Image source={PlusImage} />
</TouchableOpacity>
</View>
);
}
If you don't understand please feel free to ask, my code can be difficult to read but I'm working on that!
edit:
I tried some advises that I got here but still does to all and showed more of the code to be more compreensive
You store all elements as only one ref, you should make it more dynamic like that
const colors = useRef(Array.from({length: tasks.length} , _ => new Animated.Value(0))).current
use .from({ length }, _ => ...) for creating an array with unique object for each slot in the array (and not same object pointed by all slots)
Now you able to change only one element in onPress
onPress={() => {
console.log(colors[index]);
Animated.timing(colors[index], {
toValue: 1,
duration: 1000,
}).start();
}}
Another notes,
Don't use TouchableOpacity where you don't need onPress functionality, it's blocking it children clickability
For achieving animated behavior in Animated.View, you should chain the animation value with view style prop
<Animated.View
style={{ ...yourStyle... ,
opacity: colors[index],
}}
>
will create fading animation, while opacity will be 0 / 1 accords animation value
As you see the picture attached, I set the align item as center with the icon and text. However, I do not know why the icon is not aligned. Do you have any idea?
...
<View style={styles.nameElement}>
<TouchableOpacity>
<MaterialCommunityIcons name="calendar" size={26} />
<Text>Calendar</Text>
{/* <MaterialCommunityIcons name="calendar-alert" size={26} /> */}
</TouchableOpacity>
</View>
...
const styles = StyleSheet.create({
...
nameElement: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
...
})
Because you only set the alignItem and justifyContent style for the <View> component which is not your icon and text container in your case.
So your must set <TouchableOpacity style={{alignItems: 'center'}}>
try this
<View style={styles.nameElement}>
<TouchableOpacity style={{alignItems: "center",
justifyContent: "center",}}>
<MaterialCommunityIcons name="calendar" size={26} />
<Text>Calendar</Text>
{/* <MaterialCommunityIcons name="calendar-alert" size={26} /> */}
</TouchableOpacity>
</View>
I want to arrange the cards in such a way that it should form a grid view.I've tried several grid view component , but I can't make navigation to each item within data of npm install react-native-super-grid.So I thought making grid view with CardSection of my own.But I don't know how to arrange it within a row of 2 cards per each row.Following is my code for CardSection
cardsection
const CardSection = (props) =>{
return(
<View style={styles.containerStyle}>
{props.children}
</View>
);
};
const styles ={
containerStyle: {
padding: 10,
backgroundColor: 'white',
borderWidth:0,
marginBottom:10,
marginLeft:10,
marginRight:10,
borderColor:'#808080',
marginTop:50,
elevation: 10,
flexDirection:'row',
flexWrap:'wrap'
}
};
What I've tried now is just listing the cards as follows
list
<CardSection>
<TouchableOpacity onPress={() => Actions.newworkRequest()}>
<Text>New Work Request</Text>
</TouchableOpacity>
</CardSection>
<CardSection>
<TouchableOpacity onPress={() => Actions.workerDetails()}>
<Text>Worker</Text>
</TouchableOpacity>
</CardSection>
<CardSection>
<TouchableOpacity onPress={() => Actions.reportViewing()}>
<Text> Reports</Text>
</TouchableOpacity>
</CardSection>
<CardSection>
<TouchableOpacity onPress={() => Actions.compltpage()}>
<Text> Complaints</Text>
</TouchableOpacity>
</CardSection>
<CardSection>
<TouchableOpacity onPress={() => Actions.userpage()}>
<Text> Users</Text>
</TouchableOpacity>
</CardSection>
How do I make this as a grid view ? Such that 2 cards within a row.Please help.This is what I'm getting now https://i.stack.imgur.com/vtnuv.png .I've tried to give FlexDirection:row , but all the cards will come in the same row.So I removed that.Please help me for a solution.
You have to apply these styles on the parent of all these Card sections..
const styles ={
mainContainer: {
flex: 1,
flexWrap: 'wrap',
flexDirection: 'row'
},
containerStyle: {
padding: 10,
backgroundColor: 'white',
borderWidth:0,
marginBottom:10,
marginLeft:10,
marginRight:10,
borderColor:'#808080',
marginTop:50,
elevation: 10
}
}
List
<View style={styles.mainContainer}>
<CardSection style={styles.containerStyle} />
...
</View>
Currently, I'm developing React Native app for TV platform and I'm able to play video on TV.
I added react-native-drawer in Video Player component and able to open/close drawer but not able to change focus inside the drawer.
Here is the drawer code:
render() {
return (
<Container hasTVPreferredFocus={true}>
<Content
bounces={false}
style={{ flex: 1, backgroundColor: '#fff', top: -1 }}
>
<View style={styles.container}>
<TouchableHighlight onPress={() => {this.setState({ selected: 'play' });}}>
<View style={{ backgroundColor: this.state.selected === 'play'? '#fbd2c1' : '#FFFFFF' , padding: 10, borderRadius: 5 }}>
<Image style={styles.image} source={require('./images/play.png')} />
</View>
</TouchableHighlight>
<TouchableOpacity onPress={() => {this.setState({ selected: 'time' });}}>
<View style={{ backgroundColor: this.state.selected === 'time'? '#fbd2c1' : '#FFFFFF' , padding: 10, borderRadius: 5 }}>
<Image style={styles.image} source={require('./images/clock.png')} />
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.setState({ selected: 'user' });}}>
<View style={{ backgroundColor: this.state.selected === 'user'? '#fbd2c1' : '#FFFFFF' , padding: 10, borderRadius: 5 }}>
<Image style={styles.image} source={require('./images/user.png')} />
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.setState({ selected: 'resolution' });}}>
<View style={{ backgroundColor: this.state.selected === 'resolution' ? '#fbd2c1' : '#FFFFFF' , padding: 10, borderRadius: 5 }}>
<Image style={styles.image} source={require('./images/computer.png')} />
</View>
</TouchableOpacity>
</View>
{ this.renderUI() }
</Content>
</Container>
);
}
Thanks.
To solve that i would suggest you to force the focus and see if it works like that. If it works the problem is in how you use your TouchableHighlight.
I would think of forcing the focus change like so:
hasTVPreferredFocus={true}
onPress={() => {}}
(You have to insert this in the element tag TouchableHighlight )