I am using react-native-tab-view, but the TabBar is big, I want to make it small. How to customize it ? Applying margin/padding 0 didn't work.
Applying small height worked but the text went missing.
How to make it small or more customizable ?
<TabView
...
renderTabBar={props =>
<TabBar
{...props}
indicatorStyle={{ backgroundColor: 'white' }}
style={{ backgroundColor: 'pink' }}
tabStyle={{ backgroundColor: 'teal' }}
renderLabel={({ route, focused, color }) => (
<Text style={{ color, margin: 8 }}>
{route.title}
</Text>
)}
}
Try to use tabStyle prop for TabBar. By default it has a style:
minHeight: 48,
So in your case:
<TabView
...
renderTabBar={props =>
<TabBar
{...props}
indicatorStyle={{ backgroundColor: 'white' }}
style={{ backgroundColor: 'pink' }}
tabStyle={{ backgroundColor: 'teal', minHeight: 30 }} // here
renderLabel={({ route, focused, color }) => (
<Text style={{ color, margin: 8 }}>
{route.title}
</Text>
)}
}
Related
This is my code
const Tab = createMaterialTopTabNavigator();
<View
style={{
backgroundColor: "black",
flex: 1,
paddingTop: paddingTopForAndroid,
}}
>
<Tab.Navigator
screenOptions={({ route }) => screenOptions(route)}
keyboardDismissMode="auto"
style={{ flex: 1 }}
>
<Tab.Screen name="Explore" component={ExplorePosts} />
<Tab.Screen name="Feed" component={FeedNavigator} />
</Tab.Navigator>
</View>
The tab navigator is covering only 90% of the screen and leaves a blank black background. But when I switch the tab and come back to the primary screen, the black background is disappearing.
I solved this by adding this property to the View component
<View
style={{
height: windowHeight,
backgroundColor: "transparent",
borderTopLeftRadius: 40,
overflow: "hidden",
borderTopRightRadius: 40,
}}
>
I'm using the simple react native tab. The tab works fine but it shows the default blue color background of the tag. That means About Courses and Chat are in a row and getting blue color by default. How could I change it?Also, how could I change ' ' this heading font-family, text color, and others property?
<View style={{ backgroundColor: 'red' }}>
<Tabs tabStyle={{ backgroundColor: 'red' }}>
<Tab heading="About Test" tabStyle={{ color: 'red' }}>
<View>
<Text>Hi THis is from ABout</Text>
</View>
</Tab>
<Tab heading="Courses">
<Text>Hi this is from Courses</Text>
</Tab>
<Tab heading="Chat">
<Text>This is from Chat</Text>
</Tab>
</Tabs>
</View>
Change it like this
<Tabs tabBarUnderlineStyle={{ backgroundColor: 'dodgerblue' }}>
<Tab
heading="About Test"
tabStyle={{ backgroundColor: 'white' }}
activeTabStyle={{ backgroundColor: 'orangered' }}
textStyle={{ color: 'black', fontWeight: '100' }}
activeTextStyle={{ fontWeight: '800',color: 'white' }}>
<View>
<Text>Hi THis is from ABout</Text>
</View>
</Tab>
<Tab
heading="Courses"
tabStyle={{ backgroundColor: 'white' }}
activeTabStyle={{ backgroundColor: 'orangered' }}
textStyle={{ color: 'black', fontWeight: '100' }}
activeTextStyle={{ fontWeight: '800',color: 'white' }}>
<Text>Hi this is from Courses</Text>
</Tab>
<Tab
heading="Chat"
tabStyle={{ backgroundColor: 'white' }}
activeTabStyle={{ backgroundColor: 'orangered' }}
textStyle={{ color: 'black', fontWeight: '100' }}
activeTextStyle={{ fontWeight: '800',color: 'white' }}>
<Text>This is from Chat</Text>
</Tab>
</Tabs>
For underline styling just add
tabBarUnderlineStyle={{ backgroundColor: 'dodgerblue' }}
to the <Tabs tabBarUnderlineStyle={{ backgroundColor: 'dodgerblue' }} />
Also on Android I got to see that not setting activeTextStyle color shows no text..To fix this add
activeTextStyle={{ fontWeight: '800', color: 'white' }}> // Color as you desire
For removing border around the box
Add tabContainerStyle={{ elevation: 0 }} to <Tabs />, like this
<Tabs tabBarUnderlineStyle={{ backgroundColor: 'dodgerblue' }} tabContainerStyle={{ elevation: 0 }} >
To change Background Color of inside tabs space add style={{ backgroundColor: 'grey' }} to <Tab />, like this
<Tab
heading="About Test"
style={{ backgroundColor: 'grey' }}> // This line right here
<View>
<Text>Hi THis is from ABout</Text>
</View>
</Tab>
Check working example here
Will be providing images in the bottom to show what I mean
I was hoping to get some advice on what might be going wrong on my end. I keep trying to find different packages but am unable to get what I want. When I tried using react-native-floating-action it gave me the right size I was looking for except I can't control how the closing is done. Like I don't want it to close when an item gets pressed.
I also tried using react-native-paper but the icons are so tiny. If I try to resize it, they start to get cut off so was hoping some advice in regards to one of the two or something else if there is.
CODE
// react-native-paper
<Provider>
<Portal>
<FAB.Group
style={{
backgroundColor: 'transparent',
height: '100%',
width: '100%'
}}
open={isOpen}
fabStyle={{
marginBottom: 200,
backgroundColor: 'red'
}}
icon={(props) => (
<MaterialIcons
{...props}
name="add-circle-outline"
size={30}
color="white"
style={{
backgroundColor: 'blue',
position: 'absolute',
left: 0,
fontSize: 50,
width: 200
}}
/>
)}
actions={[
{
icon: (props) => {
console.log(props);
return (
<Avatar
containerStyle={{
backgroundColor: 'blue'
}}
size={30}
rounded
source={{
uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg'
}}
>
<AntDesign
style={{ position: 'absolute', left: 10, top: 15, color: 'red' }}
name="pluscircle"
size={15}
color="white"
/>
</Avatar>
);
},
onPress: () => console.log('Pressed star'),
style: {
backgroundColor: 'transparent',
size: 50,
backgroundColor: 'white'
}
},
{
icon: (props) => {
console.log(props);
return <AntDesign name="heart" size={props.size} color={props.color} />;
},
onPress: (e) => console.log(e)
},
{
icon: (props) => {
console.log(props);
return (
<AntDesign
{...props}
name="message1"
color={props.color}
style={{ width: props.size, height: props.size }}
/>
);
},
onPress: () => console.log('Pressed notifications')
}
]}
onStateChange={onStateChange}
onPress={() => {
setIsOpen((prev) => !prev);
if (isOpen) {
// do something if the speed dial is open
}
}}
/>
</Portal>
</Provider>
// react-native-floating-action
<FloatingAction
onPressMain={(e) => console.log(e)}
animated={false}
color={'transparent'}
showBackground={false}
distanceToEdge={{ vertical: 100, horizontal: 20 }}
floatingIcon={
<View
style={{
height: '100%',
width: '100%',
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}
>
<MaterialIcons name="add-circle-outline" size={50} color="white" />
</View>
}
position={'right'}
actions={actions}
onPressBackdrop={(s) => console.log(s)}
onPressItem={(name) => {
console.log('PRESSING');
// console.log(floatB);
// floatB.animateButton();
if (name === 'bt_language') {
navigation.navigate('Language');
}
}}
/>
In the image below. It shows what happens when i try to increase the side of the icon while using react-native-paper.
The next image below is the react-native-floating-action. The icons are much better but the issue I'm having is mostly I'm unable to prevent the actions from collapsing after clicking on an item. I'm hoping to only open and close when the main button is pressed.
Thank you for all the help and advice about this one.
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
I have this component that contains a list that is covered on the bottom side by the TabNavigator. Any ideas how to fix it? Is there only a styling way?
render() {
return (
<Container style={{ paddingBottom: 5 }}>
<Header
backgroundColor={'#1E6EC7'}
placement="left"
leftComponent={{ icon: 'menu', color: '#fff' }}
centerComponent={{ text: 'Programul Zilei', style: { color: '#fff', fontWeight: 'bold', fontSize: 22 } }}
rightComponent={<Icon name="ios-add" style={{ color: 'white' }} onPress={() => {
const {students}=this.props;
this.props.navigation.navigate('AddClass', {students})}} />}
/>
<List>
<FlatList
data={this.props.classes}
keyExtractor={(item, index) => `${index}`}
extraData={this.state}
renderItem={({ item }) => {
<ListItem
leftIcon={<View style={{ flexDirection: 'row' }}><Icon1 name="times" size={24} style={{ paddingRight: 10, color: 'red' }} onPress={() => {
this.setState({ currentStudent: wantedEmployee })
this.setState({ currentClass: item })
this.props.classDeleteModalShowUp();
}} />
}
/>
</List>
</Container>
You can hide the tab navigator for that specific screen setting
tabBarVisible as false in navigationOptions.
But I think the issue is because of the header, you can try using the react navigation header bar.
Otherwise you could add to the container a paddingBottom of the same height as the header