I am new on react-native and I was wondering if there is an easy way to overwrite a backgroundColor in the button. I did try in many ways but with no luck.
Basically I am trying to replace the blue background by default with my custom color.
Any good tips?
You can try
function App() {
const [color,setColor] = React.useState('blue');
return (
<Button
color={color}
title="Click here"
onPress={() => { setColor("black") } />
</div>
);
}
export default App;
Please go through the documentation for Button in react native,
You can easily provide the required color to color prop of Button as follows:
<Button
title="Press me"
color="black" // Color of your choice
onPress={() => Alert.alert('Button with adjusted color pressed')}>
Related
I have the following code using the Text and Button components from react-native-paper:
<Text>See also </Text>
<Button mode="text" compact onPress={this.nav( name )}>Compass</Button>
<Text> on how to use the Compass.</Text>
When rendered this results in:
If I replace the Button with TouchableOpacity or alike the result looks like:
How can I style the Button or TouchableOpacity so it's not offset in regard to the surrounding text?
UPDATE
Using the example from #RajendranNadar and after fixing so it runs on android:
See also <Pressable onPress={() => alert('Hello :)')}><Text style={styles.text}>Compass</Text></Pressable> on how to use the Compass.
results in
One way to accomplish this is to use nested texts. Something like this:
const NestedText = () => {
return (
<Text>See also <Text style={styles.link} onPress={() => {}}>Compass</Text> on how to use the Compass.</Text>
);
};
const styles = StyleSheet.create({
link: {
color: 'blue',
textDecorationLine: 'underline'
}
});
This is the best approach to using the Pressable component from the react-native package
<Text>
See also <Pressable onPress={() => alert('Hello')}>Compass</Pressable> on how to use the Compass.
</Text>
Check the live demo here https://snack.expo.dev/#raajnadar/pressable-example
Pressable component docs
Here you can create a text button or height a text.
this is a text
<Text
style={{...styles.paragraph, color: "red"}}
onPress={() => Linking.openURL('my.app.com/your_url')}>
Term of Services
I am using a Material UI button for my TODO react app. I just want my form to have a input field with submit button, but I want my submit Button to invisible so that user have a feeling that my form submits on clicking "Return" key.
import { TextField, Button } from '#material-ui/core';
<form>
<TextField
id="standard-basic"
label="Write a Todo"
variant="standard"
className="textField"
value={todoInput}
onChange={(e) => {
setTodoInput(e.target.value);
}} />
<Button
type="submit"
variant="contained"
onClick={addToDo}
className="buttonDisplay">
Display
</Button>
</form>
I added display: none; to my css still it does not disappears.
.buttonDisplay{
display: none;
}
Can someone tell me what is the issue with it.
If are looking for a way to submit form without a button, take a look at this.
export default function App() {
const [todoInput, setTodoInput] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
alert(todoInput);
};
return (
<form
onSubmit={(e) => {
handleSubmit(e);
}}
>
<TextField
id="standard-basic"
label="Write a Todo"
variant="standard"
className="textField"
value={todoInput}
onChange={(e) => {setTodoInput(e.target.value)}}
/>
</form>
);
}
onSubmit will be triggered when you press 'return' key
sandbox : https://codesandbox.io/s/polished-bush-uzi6e?file=/src/App.js
You can use different method to hide a button using CSS :
modify the opacity parameter
adjust the alpha color parameter
or just change the visibility aspect of your button
Here is a link that might help you using these elements :
Ways to hide elements in CSS
I am using React and Material-UI. To filter the data I have used filter and map. When I click on button other css properties are working fine but why is my background color not updating immediately. It updates if I click on outside area once after button click.
Here is my code snippet:
const years = [2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020];
const Cards=()=>{
const [activeYear, setActiveYear] = useState(null);
const handleYear= (e,yr)=>{
if(activeYear==yr)
setActiveYear(null);
else
setActiveYear(yr);
};
return(
.....
// filter button
{years.map((yr,index)=>(
<Grid item xs={12} sm={4} lg={6} style={{padding:'8px'}}>
<Chip
key={index}
label={yr}
onClick={e=> handleYear(e,yr)}
className={activeYear==years[index]?classes.activeYear:''}
/>
</Grid>
)
)}
......
}
This is link to sandbox https://codesandbox.io/s/filter-using-tag-e65yy?file=/src/Cards.js
The issue was solved when I added background color to css file to override default hover styles as suggested by #m4n0
.MuiGrid-item .makeStyles-activeYear-8.MuiChip-clickable:hover,
.MuiGrid-item .makeStyles-activeYear-8.MuiChip-clickable:focus {
background: #cfd;
}
I'm new to Material UI and I'm struggling.
I have a button component
export default function TheButton(props: PropsWithChildren<Props>) {
const { className, hover, level,...rest } = props;
const classes = useStyles();
return (
<Button
{...rest}
className={clsx(classes.root, className, hover === 'contained' && classes.hoverContained)}
>
{props.children}
</Button>
);
}
From this component, I'd like to have two variants: contained and outlined. Here is my outlined button.
<TheButton
variant="outlined"
color="secondary"
>
secondary
</TheButton>
When the variant outlined is selected the button has the class Muibutton-outlined. I'd like to override this class to change the border (only in the outlined variant, so only on this class).
So far I've tried something like:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
'.MuiButton-outlinedSecondary':{
border:"2px solid red" ,
},
}
)
It doesn't work.
I have a similar setting, and I tried:
adding a class submit to my button component
<Button
type="submit"
variant="outlined"
disabled={isSaving || invalid || unchanged}
color="secondary"
className={classes.submit}
>
SAVE CHANGES
</Button>
since I have the submit class I can be more precise in my styling like so:
const useStyles = makeStyles({
submit: {
marginTop: padding.medium,
marginLeft: padding.small,
'&.MuiButton-outlinedSecondary': {
border: '1px solid pink',
},
},
});
Here is the result:
Material-ui button with pink border image
As long as I have used Ant design ui kit and I have overrided styles on its default style like this:
<Button type="primary" className={styles.custom_css}>click</Button>
This has done in react and custom_css class overrides its styles on default
This might can help you, if not please let me know
Is it possible to style the React Native CheckBox component?
There is no style property listed here: https://facebook.github.io/react-native/docs/checkbox.html
I put an invalid style property on it, and the RN warning message that popped up told me all the valid CSS properties, but none of them did anything beneficial towards styling.
The component looks decent, but I want to change it from that teal color to a brand color.
Is it possible?
These properties are not working but are listed as valid style props for CheckBox:
{
height: 50, // changes the hitspace but not the checkbox itself
width: 50,
borderWidth: 1, // does nothing
backgroundColor: 'red', // makes the area around and inside the checkbox red
borderColor: 'green', // does nothing
borderStyle: 'dotted' // does nothing
}
I don't understand why it even exists if everyone just makes their own checkbox. If I did that, I wouldn't really have any use for because all it gives is
value={this.state.rememberMe}
onValueChange={() => this.toggleRememberMe()}
unless there is something magic it does under the hood. It has a decent onChange animation, but that would be deprecated instantly when I make my own and use something like <TouchableHighlight or Opacity> wrapped around an on/off image or <View>.
I can't find any info on Google except hundreds of custom checkboxes. It's actually really hard to search around them.
You can use https://github.com/react-native-community/react-native-checkbox
Android: you can use tintColors.
import CheckBox from '#react-native-community/checkbox';
.
.
.
<CheckBox
value={option.item.selected}
onValueChange={() => {}}
tintColors={{ true: '#F15927', false: 'black' }}
/>
Transform can be used to change CheckBox size.
<CheckBox
style={{ transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }] }}
/>
checkbox examples
https://github.com/react-native-checkbox/react-native-checkbox
No I couldn't find a way, but wrapping it in a View was one option:
<View style={{
position: 'absolute',
right: 0,
width: 50,
height: 50,
margin: 10,
zIndex: 100,
}}>
<Checkbox
status={i === index ? 'checked' : 'unchecked'}
className=""
/>
</View>
Short answer is you simply can't. React Native uses the native Android Checkbox component, and the only customization you get to do is changing the tint colors, as seen in the react-native-checkbox community project. This prop is undocumented in the official React Native docs.
Additionally, here's the TypeScript definition for this component: AndroidCheckBoxNativeComponent.js. Notice how the only props relayed to the native component are onChange, onValueChange, testID, on, enabled and tintColors.
Yes, you can, i recommend you that use react native elements, and with this library you have 2 options, checkedColor and uncheckedColor, by default in checkedColor is green, but you can change it to what you want, for example, checkedColor={"#fff"} or checkedColor="#fff" try them, it apply for 2 options, good luck!
For IOS use onTintColor and pass the value in string onTintColor={'red'}
<CheckBox
onTintColor={Color.theme}
onCheckColor={Color.theme}
value={isSelected}
onValueChange={setSelection}
style={Style OBJECT}
/>
import CheckBox from '#react-native-community/checkbox';
const Checkbox = (props) => {
// const [isSelected, setSelection] = useState(false);
const [toggleCheckBox, setToggleCheckBox] = useState(false)
return (
<View style={[useTailwind``, styles.container]}>
<View style={styles.checkboxContainer}>
<CheckBox
disabled={false}
value={toggleCheckBox}
tintColors={{true: '#368098'}}
onCheckColor={'#6F763F'}
onValueChange={(newValue) => setToggleCheckBox(newValue)}
/>
<Text style={[useTailwind`font-normal text-base font-sans`, styles.label]}>{props.value}</Text>
</View>
{/* <Text>Is CheckBox selected: {isSelected ? "👍" : "👎"}</Text> */}
</View>
);
};
its possible now..
just simply gives tint color of the same color of background