I have this small segment of code
const createTwoButtonAlert = () =>
Alert.alert(
"Delete from store",
"Are you sure you want to delete the product?",
[
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel",
},
{ text: "OK", onPress: () => deleteProduct() },
],
{ cancelable: false }
);
And just wanna apply styles on
"Delete from store", this line. Here is what I want to do :
style={{
fontFamily: allFont.SFUI,
color: allColor.blue,
fontSize: wp(4.5),
}}
Your help will be highly appreciated.
Alert,Toast are native components that have limited styling on the js side of react native if you are insisting on using those you have to change Native code. my advise is either use a custom alert component or use react-native-modal
Related
I am trying to implement a bar graph that will allow the selection of bars on a bar graph. The trouble I am running into is properly setting the events. I have the following code:
<VictoryChart
containerComponent={
<Svg>
<VictoryVoronoiContainer voronoiDimension="x" />
</Svg>
}
>
<VictoryAxis fixLabelOverlap name="dateAxis" />
<VictoryAxis dependentAxis name="dailySpendAxis" />
<VictoryBar
data={dataWithCreditBarsRemoved}
events={[
{
target: 'data',
eventHandlers: {
onPressIn: (event, data) => {
return [
{
target: 'data',
eventKey: 'all',
mutation: props => {
const fill = props.style?.fill;
return fill === 'green'
? null
: { style: { fill: 'green' } };
},
},
{
target: 'data',
mutation: () => {
console.log(data.datum);
setSelectedBar(data?.datum);
return {
style: { fill: 'red' },
};
},
},
];
},
},
},
]}
name="dailySpendBars"
/>
</VictoryChart>
Doing it like this makes it difficult to press on bars that have little data.
I'd like to implement it in a way where when the graph is pressed, it selects the closest bar and sliding a finger in either direction will select the bar closest. The best example I could find was in a Nike running app. It puts in a line with a tooltip that holds data that changes when the finger slides around.
How do I implement the sliding in Victory Native? Any direction would be much appreciated!
I'm trying to develop the front end of an application and I wanted to theme some boxes.
I pulled an example from here:
// theme.js
import { extendTheme } from "#chakra-ui/react"
const theme = extendTheme({
components: {
Button: {
// 1. We can update the base styles
baseStyle: {
fontWeight: "bold", // Normally, it is "semibold"
},
// 2. We can add a new button size or extend existing
sizes: {
xl: {
h: "56px",
fontSize: "lg",
px: "32px",
},
},
// 3. We can add a new visual variant
variants: {
"with-shadow": {
bg: "red.400",
boxShadow: "0 0 2px 2px #efdfde",
},
// 4. We can override existing variants
solid: (props) => ({
bg: props.colorMode === "dark" ? "red.300" : "red.500",
}),
},
},
},
})
export default theme
and adapted it to this test-code
const theme = extendTheme({
components: {
Box: {
// 1. We can update the base styles
baseStyle: {
},
// 2. We can add a new button size or extend existing
sizes: {
},
// 3. We can add a new visual variant
variants: {
Mini: {
fontWeight: "bold", // Normally, it is "semibold"
textDecoration: "underline",
boxShadow: "0px 30px 5px -20px rgba(0,0,0,0.75)"
}
},
},
},
})
The idea is that I can say <Box variant="Mini">, but that's not actually working. None of the styles have any affect on the box or it's content.
If I change Box: to Text: and add a Text element <Text variant="Mini">test</Text>, the styles are applied. It's also not working for Grid but does for Button
What am I doing wrong?
I do know that Box has a boxShadow property, but it's very limited.
I still haven't figured out how to modify Box with CSS, partly because the answer I'm about to give doesn't list a file for Box.
There's a note on the page
If you're curious as to what component styles you can override, please reference the default component style files.
When I wanted to modify Drawer, I found the same issue. I went to that link and opened drawer.ts. In there I found this function
const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
overlay: baseStyleOverlay,
dialogContainer: baseStyleDialogContainer,
dialog: baseStyleDialog(props),
header: baseStyleHeader,
closeButton: baseStyleCloseButton,
body: baseStyleBody,
footer: baseStyleFooter,
})
Which gives me some useful keys. I then found of I modified my theme styles like so, I could modify facets as expected.
import { extendTheme } from '#chakra-ui/react';
let theme = extendTheme({
components: {
Drawer: {
baseStyle: {
dialog: {
bg: "blue",
},
closeButton: {
bg: "hotpink",
},
header: {
bg: "red",
},
},
},
}
});
read the documentation in layer styles, i had the same problem with Grid component and also tried the same as you, thanks for the answer
https://chakra-ui.com/docs/theming/component-style#usestyleconfig-api
https://chakra-ui.com/docs/features/text-and-layer-styles
I was trying to modify my custom header according to one parameter that is in the state from the same component. But I see that it does not work. I can do the same inside the render and it obviously does but how can I do it in the header?
In this case for instance, I would like to change the button for another if itemNumber > 0
...
static navigationOptions = ({ navigation }) => {
return{
title: "Edit Group"+' ',
headerStyle: {
backgroundColor: '#2ca089',
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
},
headerTintColor: '#fff',
headerRight: (
<Button hasText transparent onPress={() =>
Alert.alert(
"Delete Group",
"Are you sure you want to delete this group? It is a non-reversible action!",
[
{text: 'Yes', onPress: () => console.log('Yes Pressed')},
{text: 'No', onPress: () => console.log('No Pressed'), style: 'cancel'},
],
)
}>
<Text>Delete Group</Text>
</Button>
),
};
}
constructor(props) {
super(props)
this.state = {
dataSource : [],
text : '',
itemNumber : 0,
}
}
...
I understand that because it is a static component it will not be modified dynamically but I do not see how can I do it in another fashion.
Thanks,
I can not see where the answer from TNC implement the callback function inside the headerRight in order to re-update the navigation header which I think it is the problem.
My solution is the following:
The variable which you want to observe is itemNumber, make sure is in the constructor ✅
constructor(props) {
super(props)
this.state = {
dataSource : [],
text : '',
itemNumber : 0,
selectedItems: []
}
}
Then, inside the function which you trigger the event which requires the update for the header add the following code:
triggerFunction = parameters => {
//...
let newValue = 1 //Implement your logic
this.setState(({itemNumber}) => {
this.props.navigation.setParams({itemNumber: newValue})
return {itemNumber: newValue }
});
//...
};
To conclude, on the navigationOption add the following code:
static navigationOptions = ({ navigation }) => {
return{
headerRight:
navigation.getParam('itemNumber', 0) > 0
?
<Button hasText transparent onPress={() =>
Alert.alert(
"Delete User",
"Are you sure you want to delete this user/users? It is a non-reversible action!",
[
{text: 'Yes', onPress: () => console.log('Yes Pressed')},
{text: 'No', onPress: () => console.log('No Pressed'), style: 'cancel'},
],
)
}>
<Text>Delete Users</Text>
</Button>
:
null
};
}
I have got the inspiration from this answer:
https://stackoverflow.com/a/51911736/5288983
I also attach you the documentation where you can understand better the approach:
https://reactnavigation.org/docs/en/headers.html#setting-the-header-title
You can pass multiple params to navigator as:
From Calling Container/Component
this.props.navigation.navigate('navigator-destination', {
title: 'Your Title',
label: 'Extra Params',
callback: callback // Even callback
});
In Called Container/Component
static navigationOptions = ({navigation}) => {
const {state} = navigation;
label = state.params.label;
return {
title: `${state.params.title}`,
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
};
};
To call callback:
_someMethod = () => {
const {navigation} = this.props;
navigation.state.params.callback(parameters);
navigation.goBack();
};
how do i change the color and center the text of my alert box in react native.
Here is my code.
Alert.alert(
'Edit Profile',
'User Save Succesful!',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
I'm using react-native TabNavigator to navigate between tabs in my application.
const TabNav = TabNavigator({
Home: {
screen: HomeScene,
navigationOptions:{
tabBar: {
label: 'Home',
icon: ({ focused }) => {
let imgSource = focused
? require('../common/img/selected-home-75.png')
: require('../common/img/unselected-home-75.png');
return <Image
source={imgSource}
style={tabBarStyles.icon}
/>
}
}
}
},
...
}, {
swipeEnabled: false,
tabBarOptions: {
showIcon: true,
upperCaseLabel: false,
labelStyle: tabBarStyles.labelStyle,
style: tabBarStyles.style
}
});
Each tab contains an icon and a label. I would like to style the TabBar slightly differently depending on whether the application is running on iOS or Android.
The documentation for "tabNavigationConfig describes two sections of "tabBarOptions" for "TabBarBottom" and "TabBarTop" which makes me think it IS possible to provide a configuration for the top TabBar and another for the bottom TabBar.
Is it possible to provide "tabBarOptions" for iOS and different options for Android (ie top and bottom)?
It's possible to apply options based on the platform with usage of:
import {Platform} from 'react-native';
So you can assign a separate options for each platform based on the Platform.OS value :
const iosTabBarOptions = {
showIcon: false,
upperCaseLabel: false,
labelStyle: tabBarStyles.labelStyle,
style: tabBarStyles.style
};
const androidTabBarOptions = {
showIcon: true,
upperCaseLabel: true,
labelStyle: tabBarStyles.labelStyle,
style: tabBarStyles.style
};
tabBarOptions: Platform.OS === 'ios'
? iosTabBarOptions
: androidTabBarOptions