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
Related
So I already know that <TouchableHighlight> can have specifically 1 child, but when I do that, I STILL get the error: React.Children.only expected to receive a single React element child.
What is going on? Is it a bug?
I literally took this example from somewhere online and it is supposed to work:
<View>
<Text>Tony Stark is Ironman</Text>
<TouchableHighlight>
<View
style={{
width: "50px",
height: "50px",
backgroundColor: "yellow",
}}
/>
</TouchableHighlight>
</View>
Yet, I still get the error.
This is the entire code:
<Form onSubmit={onSubmit}>
<KeyboardAwareScrollView>
<Button title={props.title} onPress={toggleModal} color="#006600" />
<Modal
isVisible={isModalVisible}
backdropColor="white"
style={{ marginTop: 55 }}
>
<KeyboardAwareScrollView
style={{
backgroundColor: "white",
borderBottomColor: "#000000",
borderBottomWidth: 2,
padding: 15,
}}
>
<Button title="Cancel" onPress={toggleModal} color="red" />
<TextInput
placeholder="Name of park/launch"
multiline
style={{ height: 60, borderColor: "gray", borderWidth: 1 }}
onChangeText={(t) => setName(t)}
value={name}
/>
<View>
<Text>Tony Stark is Ironman</Text>
<TouchableHighlight>
<View
style={{
width: "50px",
height: "50px",
backgroundColor: "yellow",
}}
/>
</TouchableHighlight>
</View>
{/* <TextInput
placeholder="Comments"
multiline
style={{ height: 60, borderColor: "gray", borderWidth: 1 }}
onChangeText={(t) => setComments(t)}
value={comments}
/> */}
<TextInput
placeholder="Tags (separate each tag by a comma)"
multiline
style={{ height: 60, borderColor: "gray", borderWidth: 1 }}
onChangeText={(t) => setTags(t)}
value={tags}
/>
<Text>Rate the difficulty of this location</Text>
<Slider
step={1}
minimumValue={0}
maximumValue={10}
value={difficulty}
onValueChange={(slideValue) => setDifficultyValue(slideValue)}
minimumTrackTintColor="#1fb28a"
maximumTrackTintColor="#d3d3d3"
thumbTintColor="#b9e4c9"
/>
<Text>Difficulty value: {difficulty}</Text>
<ImagePickerExample></ImagePickerExample>
<Button
raised
icon={{ name: "check" }}
title="Submit"
name="submit"
color="green"
onPress={onSubmit}
/>
</KeyboardAwareScrollView>
</Modal>
</KeyboardAwareScrollView>
</Form>
Check for whitespaces or something like that inside <TouchableHighlight />
Basically, I have three buttons as seen in the image below. When I click on the button's actual text, it redirects, but if I click anywhere else inside the button, nothing happens.
<Button
variant="outlined"
size="large"
color="inherit"
style={{ marginRight: '1rem' }}
sx={{
':hover': {
opacity: '',
borderColor: '#5865f2', // theme.palette.primary.main
},
}}
>
<Link style={{ textDecoration: 'none', color: 'white' }} to="/portfolio" className="home-left-portfolio">PortFolio</Link>
</Button>
My goal is to make it redirect regardless of whether we click inside the button's text or not.
Wrap Your Buttons with < Link > button </ Link >
<Link style={{ textDecoration: 'none', color: 'white' }} to="/portfolio" className="home-left-portfolio">PortFolio
<Button
variant="outlined"
size="large"
color="inherit"
style={{ marginRight: '1rem' }}
sx={{
':hover': {
opacity: '',
borderColor: '#5865f2', // theme.palette.primary.main
},
}}
>
</Button>
</Link>
Try this:
<Link style={{ textDecoration: 'none', color: 'white' }} to="/portfolio" className="home-left-portfolio"><Button
variant="outlined"
size="large"
color="inherit"
style={{ marginRight: '1rem' }}
sx={{
':hover': {
opacity: '',
borderColor: '#5865f2', // theme.palette.primary.main
},
}}
>
PortFolio
</Button>
</Link>
Zamiast
<button><link></link></button>
sprobuj
<link><button></button></link>
Powinno pomoc
Any solution for styling the bar container in Native base ?
The offered vars are not enough, Like I need to change TabsContainer height, remove the bottom border and do some side padding before the tabs
Before I ask I checked all the related topics and nothing suitable for my situation
import React, { Component } from 'react';
import { Container, Tab, Tabs, ScrollableTab, Icon, Text } from 'native-base';
import Tab1 from './tabOne';
import Tab2 from './tabTwo';
import Tab3 from './tabThree';
import Tab4 from './tabFour';
import Tab5 from './tabFive';
export default class ProdList extends Component {
render() {
return (
<Container>
<Tabs tabContainerStyle={{ height: 30, borderWidth: 0 }} tabBarUnderlineStyle = {{ width: 0, borderWidth: 0}} tabBarBackgroundColor='#fff' tabStyle={{backgroundColor: '#fff'}} renderTabBar={()=> <ScrollableTab />}>
<Tab tabStyle={{backgroundColor: '#fff',marginLeft: 30, marginRight: 30, paddingLeft: 30 }} textStyle={{fontFamily: 'Poppins', color: '#aeaeb1'}} activeTabStyle={{ height: 30,backgroundColor: '#fbeaee',borderRadius: 20,marginTop: 10,}} activeTextStyle={{color: '#333',fontFamily: 'Poppins', fontWeight: 'normal'}} heading="Main Course">
<Tab1 />
</Tab>
<Tab tabStyle={{backgroundColor: '#fff', }} textStyle={{color: '#aeaeb1',fontFamily: 'Poppins', }} activeTabStyle={{ height: 30,backgroundColor: '#fbeaee',borderRadius: 20,marginTop: 10,}} activeTextStyle={{color: '#333',fontFamily: 'Poppins', fontWeight: 'normal'}} heading="Appetizers">
<Tab2 />
</Tab>
<Tab tabStyle={{backgroundColor: '#fff', }} textStyle={{fontFamily: 'Poppins', color: '#aeaeb1'}} activeTabStyle={{ height: 30,backgroundColor: '#fbeaee',borderRadius: 20,marginTop: 10,}} activeTextStyle={{color: '#333',fontFamily: 'Poppins', fontWeight: 'normal'}} heading="Desserts">
<Tab3 />
</Tab>
<Tab tabStyle={{backgroundColor: '#fff', }} textStyle={{fontFamily: 'Poppins', color: '#aeaeb1'}} activeTabStyle={{ height: 30,backgroundColor: '#fbeaee',borderRadius: 20,marginTop: 10,}} activeTextStyle={{color: '#333',fontFamily: 'Poppins', fontWeight: 'normal'}} heading="Soups">
<Tab4 />
</Tab>
<Tab tabStyle={{backgroundColor: '#fff', }} textStyle={{fontFamily: 'Poppins', color: '#aeaeb1'}} activeTabStyle={{ height: 30,backgroundColor: '#fbeaee',borderRadius: 20,marginTop: 10,}} activeTextStyle={{color: '#333',fontFamily: 'Poppins', fontWeight: 'normal'}} heading="Salads">
<Tab5 />
</Tab>
</Tabs>
</Container>
);
}
}
Here is the Result
need to change TabsContainer height, remove the bottom border and do some side padding before the tabs .. Any solution ?
Im trying to get my text view and button to center when the Keyboard is summoned.
I tried wrapping my SafeArea with KeyboardAvoidingView but that did not seem to work.
I also tried setting the KeyBoardAvoidingView behavior to position which also did not work.
Any guidance would be appreciated.
KeyboardAvoidingView does not seem to work as expected.
**Whats happening : **
**Heres my code : **
<SafeAreaView style={{ flex: 1, backgroundColor: '#376772' }}>
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.Os == 'ios' ? 'padding' : null}
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={{ flex: 1 }}>
<MapView
style={{ flex: 0.6 }}
showsMyLocationButton={true}
showsUserLocation={true}
followsUserLocation={lock}
onTouchStart={() => {
set(false)
}}
onPress={(loc) => {
setLocation(loc.nativeEvent.coordinate)
}}
>
<Marker coordinate={location} />
</MapView>
<Fragment>
<View
style={{
alignSelf: 'center',
alignContent: 'center',
backgroundColor: '#202B35',
padding: 10,
paddingHorizontal: 35,
margin: 5,
borderRadius: 5,
alignItems: 'center',
position: 'absolute',
}}
>
<View style={{ flexDirection: 'row' }}>
<Badge
status="error"
containerStyle={{ padding: 5 }}
/>
<Text
style={{
color: '#fff',
fontSize: 16,
marginBottom: 5,
}}
>
New Crossing
</Text>
<Text
style={{
color: '#fff',
fontSize: 10,
padding: 5,
}}
>
(Tap to add)
</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<Badge
status="primary"
containerStyle={{ padding: 5 }}
/>
<Text
style={{
color: '#fff',
fontSize: 16,
}}
>
{'Existing Crossings'}
</Text>
</View>
</View>
</Fragment>
<View
style={{
flex: 0.4,
backgroundColor: '#376772',
margin: 5,
borderRadius: 5,
}}
>
<Input
placeholder="Enter Crossing name here"
inputStyle={{ color: 'orange' }}
rightIcon={
<Icon
name="edit"
size={25}
color="orange"
/>
}
placeholderTextColor={'orange'}
errorStyle={{ color: 'red' }}
/>
<Button
buttonStyle={{
margin: 10,
top: scale(10),
padding: 15,
backgroundColor: '#5cb85c',
borderRadius: 4,
}}
icon={
<Icon name="send" size={15} color="white" />
}
iconRight
titleStyle={{ fontWeight: 'bold' }}
title="Submit "
/>
</View>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
</SafeAreaView>
Setting behavior to "position" worked for me by removing flex: 1 from styles, like
<KeyboardAvoidingView behavior="position">
{children}
</KeyboardAvoidingView>
Cheers!
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>
)}
}