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>
Related
next to Entertain text, there is an icon, called Button,
When I click on that icon, I want those parts(netflix to twitch) to come that place.
How can I do that? I mean, i want those part to be hide at first, but after i click on that icon, it should come to that place.
Here are my code,
ThirdScreen.js
import React from "react";
import { Text, SafeAreaView, View, StyleSheet, ScrollView } from "react-native";
import Transfer from "../icons/transfer.svg";
import Entertain from "../icons/entertain.svg";
import Netflix from "../icons/netflix.svg";
import Button from "../icons/button.svg";
import Dribble from "../icons/dribble.svg";
import Spotify from "../icons/spotify.svg";
import Twitch from "../icons/twitch.svg";
import Bill from "../icons/bill.svg";
import Time from "../icons/time.svg";
import Home from "../icons/home.svg";
import User from "../icons/user.svg";
import Ratio from "../icons/ratio.svg";
const ThirdScreen = () => {
return (
<SafeAreaView style={{ flex: 1, backgroundColor:"#ffffff"}}>
<View style={{ alignItems: "center", padding: 20 }}>
<Text style={styles.transaction}>Transaction History</Text>
</View>
<View style={{ padding: 10, }}>
<View style={styles.rows}>
<Text style={styles.bigBold}>Category</Text>
<Text style={{ color: "#7cb3d9" }}>This week</Text>
</View>
<View style={{ padding: 20 }}>
{/* Transfer */}
<View style={[styles.elevation, {marginBottom:10,}]}>
<View style={[styles.rows, {padding:5}]}>
<View style={styles.iconText}>
<Transfer height={30} width={22} fill={"#1E2439"} />
<Text style={styles.bigBold}>Transfer</Text>
</View>
<View>
<Button height={30} width={22} fill={"#1E2439"} />
</View>
</View>
</View>
{/* Entertain */}
<View style={styles.elevation}>
<View style={[styles.rows,{padding:5,}]}>
<View style={styles.iconText}>
<Entertain height={30} width={22} fill={"#1E2439"} />
<Text style={styles.bigBold}>Entertain</Text>
</View>
<View>
<Button height={30} width={22} fill={"#1E2439"} />
</View>
</View>
</View>
<ScrollView style={{padding:10}}>
{/* Netflix */}
<View style={styles.rows}>
<View style={styles.iconText}>
<View style={[styles.iconBackground, { backgroundColor: "#ffd4d5"}]}>
<Netflix height={30} width={22} fill={"#1E2439"} />
</View>
<View style={styles.entertainItems}>
<Text style={styles.entertainItemsText}>Netflix</Text>
<Text style={styles.grayText}>4 March</Text>
</View>
</View>
<View style={{ flexDirection: "column", alignItems: "flex-end" }}>
<Text style={styles.redText}>-$8.99</Text>
<Text style={styles.grayText}>Subscription</Text>
</View>
</View>
{/* Dribble */}
<View style={styles.rows}>
<View style={styles.iconText}>
<View style={[styles.iconBackground, { backgroundColor: "#fdd7e6" }]}>
<Dribble height={30} width={22} fill={"#1E2439"} />
</View>
<View style={styles.entertainItems}>
<Text style={styles.entertainItemsText}>Dribble</Text>
<Text style={styles.grayText}>12 March</Text>
</View>
</View>
<View style={{ flexDirection: "column", alignItems: "flex-end" }}>
<Text style={styles.redText}>-$120.00</Text>
<Text style={styles.grayText}>Subscription</Text>
</View>
</View>
{/* Spotify */}
<View style={{ marginVertical: 10, flexDirection: "row", justifyContent: "space-between" }}>
<View style={styles.iconText}>
<View style={[styles.iconBackground, { backgroundColor: "#d5ffd9" }]}>
<Spotify height={30} width={22} fill={"#1E2439"} />
</View>
<View style={styles.entertainItems}>
<Text style={styles.entertainItemsText}>Spotify</Text>
<Text style={styles.grayText}>25 March</Text>
</View>
</View>
<View style={{ flexDirection: "column", alignItems: "flex-end" }}>
<Text style={styles.redText}>-$9.99</Text>
<Text style={styles.grayText}>Subscription</Text>
</View>
</View>
{/* Twitch */}
<View style={{ marginVertical: 10, flexDirection: "row", justifyContent: "space-between" }}>
<View style={styles.iconText}>
<View style={[styles.iconBackground, { backgroundColor: "#efd6ff" }]}>
<Twitch height={30} width={22} fill={"#1E2439"} />
</View>
<View style={styles.entertainItems}>
<Text style={styles.entertainItemsText}>Twitch</Text>
<Text style={styles.grayText}>25 March</Text>
</View>
</View>
<View style={{ flexDirection: "column", alignItems: "flex-end" }}>
<Text style={styles.redText}>-$24.99</Text>
<Text style={styles.grayText}>Subscription</Text>
</View>
</View>
</ScrollView>
{/* Bill */}
<View style={styles.elevation}>
<View style={[styles.rows, { padding: 5, }]}>
<View style={styles.iconText}>
<Bill height={30} width={22} fill={"#1E2439"} />
<Text style={styles.bigBold}>Bill</Text>
</View>
<View>
<Button height={30} width={22} fill={"#1E2439"} />
</View>
</View>
</View>
</View>
{/* Footer */}
<View style={{flexDirection:"row", alignItems:"center", justifyContent:"space-between",marginHorizontal:35,}}>
<Home height={30} width={22} fill={"#1E2439"} />
<Ratio height={30} width={22} fill={"#1E2439"} />
<Time height={30} width={22} fill={"#1E2439"} />
<User height={30} width={22} fill={"#1E2439"} />
</View>
</View>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
transaction: {
fontSize: 17,
fontWeight: "bold",
letterSpacing: .5,
},
elevation: {
backgroundColor: "#fdfdfd",
elevation: 3,
height: 60,
borderRadius: 10,
},
rows: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
marginVertical:10,
},
iconText: {
flexDirection: "row",
alignItems: "center",
},
iconBackground: {
height: 40,
width: 40,
borderRadius: 13,
alignItems: "center",
justifyContent: "center"
},
entertainItems: {
flexDirection: "column",
marginLeft:20,
},
bigBold: {
fontSize: 17,
fontWeight: "bold",
marginLeft:15,
},
entertainItemsText: {
fontSize:15,
fontWeight:"bold",
},
redText : {
color:"#e46e6a",
fontWeight: "bold",
fontSize:15,
},
grayText: {
color: "#b2b4c3",
},
})
export default ThirdScreen;
Here is the screenshot:
A simple approach is to store a boolean isShown that is toggled when interacting with the button. Use the useState hook to store and update that boolean:
const ThirdScreen = () => {
// Default to `false` so the section is initially hidden
const [isShown, setIsShown] = React.useState(false);
return (
<SafeAreaView style={{ flex: 1, backgroundColor:"#ffffff"}}>
<View style={{ alignItems: "center", padding: 20 }}>
<Text style={styles.transaction}>Transaction History</Text>
</View>
<View style={{ padding: 10, }}>
{/* ... */}
<View style={{ padding: 20 }}>
{/* Transfer */}
{/* ... */}
{/* Entertain */}
<View style={styles.elevation}>
<View style={[styles.rows,{padding:5,}]}>
<View style={styles.iconText}>
<Entertain height={30} width={22} fill={"#1E2439"} />
<Text style={styles.bigBold}>Entertain</Text>
</View>
<View>
<Button
height={30}
width={22}
onClick={() => { setIsShown((currIsShown) => !currIsShown); }}
fill={"#1E2439"}
/>
</View>
</View>
</View>
{/* Render the inner <ScrollView> only if `isShown` is true */}
{isShown && (
<ScrollView style={{padding:10}}>
{/* Netflix */}
{/* ... */}
</ScrollView>
)}
{/* Bill */}
{/* ... */}
</View>
{/* Footer */}
{/* ... */}
</View>
</SafeAreaView>
)
}
You can use the onClick event to change your required dom
For this first, make a state and set the initial value to false. Then use the onClick event and change the state using useEffect of setState.
At Last, change the CSS of the section to display: "none" on false and display: "block"( or other value ) on true
I'm learning react native and decided to make a list of my games, for that I use a FlatList (code below), but for some reason the FlatList just scroll a little and I can't see the entire content. I've tryed to add 'flex: 1' in a style (like some awnsers in the internet) but when I do this, all my content turn blank. Here are a screenshot of the maximum I can scroll.
My code (The function don't change nothing in layout, I just pick some data from a API, so I don't paste here):
import React from 'react';
import { Button, FlatList, Image, SafeAreaView, StatusBar, StyleSheet, Text, TextInput, View } from 'react-native'
export default function App() {
const [id, setId] = React.useState('');
const [apps, setApps] = React.useState([]);
return (
<SafeAreaView style={{padding: 20}}>
<StatusBar hidden={false} backgroundColor={"white"} barStyle={'dark-content'} />
<View>
<TextInput style={{ height: 40, borderColor: 'gray', borderWidth: 1 }} onChangeText={text => setId(text)} keyboardType={'numeric'} value={id} placeholder={"Insira o ID do jogo aqui"} />
<Button onPress={e => addApp()} title="Adicionar" color="#841584" accessibilityLabel="Salvar Id" />
<View style={{marginTop: 32}}>
<FlatList data={apps} scrollEnabled={true}
renderItem={({item}) =>
<View style={{alignItems: 'center', marginBottom: 32}}>
<Image style={{width: "100%", height: 200}} source={{ uri: item.image}} />
<Text style={{fontSize: 20}}>{item.name}</Text>
<View style={{width: '100%', flexDirection: 'row', flex: 4, justifyContent: 'space-around'}}>
<View style={{flexDirection:'row', alignItems: 'center'}}>
<Image style={{width: 15, height: 15, marginRight: 5}} source={require('./assets/disc.png')} />
<Text>{item.disc}</Text>
</View>
<View style={{flexDirection:'row', alignItems: 'center'}}>
<Image style={{width: 15, height: 15, marginRight: 5}} source={require('./assets/calendar.png')} />
<Text>{item.dateLaunch}</Text>
</View>
<View style={{flexDirection:'row', alignItems: 'center'}}>
<Image style={{width: 15, height: 15, marginRight: 5}} source={require('./assets/calendar.png')} />
<Text>{item.dateBuy}</Text>
</View>
<View style={{flexDirection:'row', alignItems: 'center'}}>
<Image style={{width: 15, height: 15, marginRight: 5}} source={require('./assets/coin.png')} />
<Text style={{fontWeight: 'bold'}}>{item.price}</Text>
</View>
</View>
</View>
}
/>
</View>
</View>
</SafeAreaView>
);
}
Try this:
<FlatList style={{ flex: 0 }}
initialNumToRender={apps.length}
Or try:
Try using flex: 1 in the listContainer styling, this should make it stay in the boundaries of your parent view.
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
I am new in react native and I have to design a screen and when list going longer I realised my scroll view is not working here is below my code please share suggestion...Thanks!
<View style={{flex:1}}>
<ActionBar
containerStyle={{height:60,alignItems: 'center'}}
backgroundColor={'#fff'}
title={'Select Categories'}
titleStyle={styles.pageTitle}
onLeftPress={() => goBack()}
leftIconContainerStyle={{marginTop:22}}
leftIconName={'back'}
leftIconImageStyle={{backgroundColor:'#333',height:18,width:18}}
/>
<Image source={require('../images/bg-login.jpg')}
style={{position:'absolute',left:0,right:0,top:0,bottom:0}} />
<ScrollView style={{backgroundColor:'#00000000',position:'absolute',left:0,right:0,top:0,bottom:0}} >
{views}
</ScrollView>
<View style={styles.footerSec}>
<TouchableOpacity style={styles.nextBtn}
onPress={()=> {this.props.navigation.navigate('Tutorials',{tutId:this.state.selectedCats})}}>
<Text style={[styles.btnText, styles.priceText]}>Next</Text>
</TouchableOpacity>
</View>
</View>
Here is my list code:
<TouchableOpacity key={itemData[j]._id}
onPress = {() => {
activeItem ? this.removeCat(itemData[j]._id) : this.insertCat(itemData[j]._id)
}}>
<View style={{position:'relative'}}>
<LinearGradient colors={activeItem ? ['#cb5fb1', '#f874d8', '#f98bde'] :['#ffb6cf','#ffb6cf','#ffb6cf'] } style={{
position: 'absolute',
alignItems: 'center',
justifyContent:'center',
backgroundColor: '#f673d7',
width: armSize,
height: armSize,
borderRadius: (armSize) / 2,
top: topp,
left: leftp,
}}>
<Text style={{
color: '#fff',
alignSelf:'center',
fontSize: RandomNumber,
fontWeight: '600',
}}>
{itemData[j].name}
</Text>
</LinearGradient>
</View>
</TouchableOpacity>
I designed below screen but the scroll view bounce and come up on same position...I think this is because of child position style but it's required for the circle in row. I can't scroll for below circles that's the issue.
You could use normal Image to put a background image using position='absolute' and setting background color opacity of ScrollView to #00000000 which means that will be transparent
Example
<Image
source={require('../images/bg-login.jpg')}
style={{position:'absolute',
left:0,
right:0,
top:0,
bottom:0}} />
<ScrollView
style={{backgroundColor:'#00000000',
position:'absolute',
left:0,
right:0,
top:0,
bottom:0}} >
<View>
<Text>Some content</Text>
</View>
</ScrollView>
For the scroll view issues I used below code and it's working fine everywhere
<ScrollView contentContainerStyle={{ paddingBottom: 120 }}>
---code---
</ScrollView>
I am attempting to conditionally render an icon and some text if the user has connection via wifi or cell data. The icon on the very left with the phone number should only appear if there is a connection. Otherwise, it should not render, and the rest of the icons should fill the space. When I toggle connectivity, the phone number text remains, but the icon disappears and the rest of them fill the space as they should. Can anyone tell me why the text (the phone number) is not changing as desired?
Relevant code for conditional render:
<View style={styles.actionArea}>
{props.isConnected && (
<View style={styles.actionItem}>
<Text>{props.dispatch.call_back_number}</Text>
<MaterialCommunityIcons name={'phone-forward'} size={50} onPress={() => handleClick(`tel:${props.dispatch.call_back_number}`)}/>
</View>
)}
<View style={styles.actionItem}>
<Text>Enter Call Log</Text>
<MaterialCommunityIcons name={'phone'} size={50} onPress={() => props.enterCallLog(true)}/>
</View>
<View style={styles.actionItem}>
<Text>Work Order</Text>
<MaterialCommunityIcons name={'wrench'} size={50}/>
</View>
<View style={styles.actionItem}>
<Text>Contracts</Text>
<MaterialCommunityIcons name={'animation'} size={50}/>
</View>
</View>
The styles code:
actionArea: {
paddingTop: 10,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
},
actionItem: {
flexDirection: 'column',
alignItems: 'center',
},