Can anyone help elaborate a way one can style material top tab navigation to one's taste
am trying to achieve the below image
tabView Image
my code:
export default function MyTabs() {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={{
tabBarActiveTintColor: '#e91e63',
tabBarLabelStyle: {
fontSize: 12,
backgroundColor: 'white',
paddingVertical: 20,
paddingHorizontal: 45,
borderRadius: 30,
},
tabBarStyle: {backfaceVisibility: 'hidden'},
tabBarContentContainerStyle: {backfaceVisibility: 'hidden'},
}}>
<Tab.Screen
options={{tabBarLabel: 'Opened'}}
name="OpenTransaction"
component={OpenTransaction}
/>
<Tab.Screen
options={{tabBarLabel: 'Ongoing'}}
name="OngoingTransaction"
component={OngoingTransaction}
/>
<Tab.Screen
options={{tabBarLabel: 'Closed'}}
name="ClosedTransaction"
component={ClosedTransaction}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
Related
I have a RightHeadingContainer that is a styled div:
const RightHeadingContainer = styled.div({
color: 'white',
alignSelf: 'center',
fontSize: 17,
fontWeight: 400,
paddingLeft: '56px',
paddingRight: '56px',
justifyContent: 'flex-end'
})
it is rendering in my Header component:
<RightHeadingContainer>{rightHeading}</RightHeadingContainer>
The rightHeading prop is being passed to my SlidingPanel:
const StyledRightHeadingContainer = styled.div({
fontWeight: 'bold',
display: 'inline-flex',
alignItems: 'center'
})
const Panel = ({ selectedAccName, selectedAccNumber }) => {
return (
<SlidingPanel
rightHeading={
<StyledRightHeadingContainer>
<Member colour='white' size='XL' />
{`${selectedAccName}`} {`${selectedAccNumber}`}
</StyledRightHeadingContainer>
} />
)
}
export default Panel
In my sliding panel I'm passing an icon 'Member' and some variables. At the moment the icon is right against the text of the first variable and am unsure how to add spacing between them. I've tried using flex but get no results I believe because of the rendering through a prop value. How can I add spacing between the two elements without hardcoding it?
You can either use   Between the text and the icon or add padding/margin in the icon component
Something like
<Member colour='white' size='XL' styles={{paddingRight: ‘10px’}} />
Or
<StyledRightHeadingContainer>
<Member colour='white' size='XL' />
{`${selectedAccName}`} {`${selectedAccNumber}`}
</StyledRightHeadingContainer>
I'm currently trying to dynamically display different rows of buttons that are evenly spaced out from each other. In my code, two rows have five buttons each, and the third row has only two buttons. Since both buttons are being created using the same component, I was wondering if there was any CSS to help me do this properly.
Currently, here is the code for my the button component:
const NodesOptionButton = (props) => {
const styles = StyleSheet.create({
bold: {
fontWeight: '800',
},
textWrapper: {
width: 60,
height: 60,
borderWidth: 1,
borderStyle: 'solid',
borderColor: '#000',
padding: 12,
marginVertical: 8,
backgroundColor: props.isActive ? '#000' : '#fff',
alignItems: 'center',
justifyContent: 'center',
},
activeTextColor: {
color: '#fff',
}
});
And I'm rendering the three rows of button through this code:
const NPage = (props) => {
const styles = StyleSheet.create({
nodeOptionsContainer: {
flexDirection:'row',
backgroundColor:'red',
display: 'flex',
justifyContent: 'space-evenly',
},
});
//lots of code with logic
return (
<React.Fragment>
<View style={styles.nodeOptionsContainer}>
{nodeNumberOptions}
</View>
<View style={styles.nodeOptionsContainer}>
{clincallyOccultOptions}
</View>
<View style={styles.nodeOptionsContainer}>
{MSIOptions}
</View>
</React.Fragment>
)
Is there any suggestions, or would I have to create a new component for that specific button? Thanks!
You want the two last buttons to take up the whole row? You can always try to add:
flex-grow: 1
to your button component.
If you want your buttons to always take up the whole row, you should just need to add flex: 1 to your Button component root View, and you don't need space-evenly in the parent.
If that's not the case, maybe you should post a pic of the desired design and the current design with problem. It helps understand.
p.s: another tip for performance...define your style outside your component.
I am using the native-base button and trying to download the image by pressing the button. It's is working perfectly fine in IOS but not working in Android. Here is my code
<View
style={{
marginVertical: hp("2%"),
marginHorizontal: wp("15%"),
textAlign: "center",
width: "100%",
}}
>
<Button
onPress={() => downloadFile()}
style={{
backgroundColor: "#fff",
width: "60%",
borderRadius: 0,
}}
block
>
<Text
style={{
color: "black",
fontSize: RFPercentage(2.1),
fontFamily: "BalsamiqSansBold",
}}
>
ADD TO PHOTOS
</Text>
</Button>
</View>
The downloadFile() function is called in IOS when the button is being pressed but it's not working in the case of Android.
I also tried console logging on press like this
<Button
onPress={() => console.log("Button Clicked")}
style={{
backgroundColor: "#fff",
width: "60%",
borderRadius: 0,
}}
block
>
It's working in IOS but not in the case of Android.
Also if I directly call the function on onPress like this in Android it automatically logs Button Clicked without being pressed. I tried to figure all the possible ways to resolve it but I am not getting the exact cause of this issue.
<Button
onPress={console.log("Button Clicked")}
style={{
backgroundColor: "#fff",
width: "60%",
borderRadius: 0,
}}
block
>
Maybe you are facing an issue regarding TouchableOpacity in android.
You can import ToucahableOpacity from 'react-native-gesture-handler' and hopefully this will help a lot.
You can import like this
import {TouchableOpacity} from 'react-native-gesture-handler'
import {TouchableOpacity } from 'react-native'
<TouchableOpacity
style={styles.button}
onPress={handleSaveLimitValue}
>
<Text
color={colors.white}
weight={TextWeight.DEMI_BOLD}
size={16}
style={styles.buttonText}
>
Save
</Text>
</TouchableOpacity>
Using TouchableOpacity of native module worked for me instead of using import {BaseButton} from react-native-gesture-handler
Hope my answer may help you.
I'm facing a little problem with the header included with the stackNavigator in react-native.
The header title default style seems to be set as alignSelf: start, however, i can't change it to center in my application.[![Header is not centered][1]][1]
https://i.stack.imgur.com/1Ih7Q.png
Here is the code for my routes section:
import * as React from 'react';
import {createStackNavigator} from '#react-navigation/stack';
import {NavigationContainer} from '#react-navigation/native';
import Main from './pages/Main';
import User from './pages/User';
const Stack = createStackNavigator();
export default function Routes() {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerStyle: {backgroundColor: '#7159c1'},
headerTintColor: '#fff',
headerTitleStyle: {
alignSelf: 'center',
alignItems: 'center',
color: '#fff',
},
}}>
<Stack.Screen name="Home" component={Main} />
<Stack.Screen
name="User"
component={User}
options={({route}) => ({title: route.params.user.name})}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
I don't know exactly why what you did doesn't work, but try to add headerTitleAlign: 'center' property to screenOptions (not to headerTitleOptions inside screenOptions)
In my case I was using react-navigation version 4 EXPO, So I use
headerTitleStyle : { marginTop: Platform.OS == 'ios'? 12:5, textAlign: 'center', width: '90%' },
I use textAlign: 'center' and width: '90%' under headerTitleStyle.
And it works Fine for me.
I am not sure that it will work for with others versions.
I want to override some sub-component of style in react native.like -
I have created an style CircleShapeView
const styles = StyleSheet.create({
CircleShapeView: {
width: 50,
height: 50,
borderRadius: 50/2,
backgroundColor: '#000'
},
});
I want change backgroundColor ,when i am usins this style. some thing like this.
<Image
style={backgroundColor: "#fff", styles.CircleShapeView}
...
/>
What is right way to do it?
To override the backgroundColor, you could just do this:
<Image
style={[ styles.CircleShapeView, { backgroundColor: "#fff" } ]}
...
/>
A more flexible way of overriding style would be to pass an additional style prop to your subcomponent.
You would call your subcomponent like that:
<Subcomponent passedStyle={{ backgroundColor: '#fff' }} />
Apply passed style to your image:
<Image
style={[ styles.CircleShapeView, this.props.passedStyle ]}
...
/>
To add to the other answers here, make sure that you are specifying the inherited props style AFTER the style on the component you are trying to override.
Example:
Do this:
<Image
style={[ styles.CircleShapeView, this.props.passedStyle ]}
...
/>
Not this:
<Image
style={[ this.props.passedStyle, styles.CircleShapeView ]}
...
/>
The second example will NOT override the style on the component.