I'm trying to integrate stripe on my mobile app
I tried to import CardField from '#stripe/stripe-react-native' but the problem is I can't change its style I want the number field to be on the line as so for both CVC and expiry date.
is there a way to do this I checked the documentation I only found this example
The docs for using the CardField with stripe-react-native are here: https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=custom#react-native-create-checkout-page
The CardField support some styling via style and cardStyle as shown in the example:
<CardField
cardStyle={{
backgroundColor: '#FFFFFF',
textColor: '#000000',
}}
style={{
width: '100%',
height: 50,
marginVertical: 30,
}}
/>
Related
Hi I am new to react native. I was trying to add a calendar date picker to the app which worked fine with
react-native-calendar-picker
However I tried adding another view below it, but, elements are not adding outside, instead, the calendar element is getting longer in height and hiding whatever i add after it.
<ScrollView style={styles.scrollMain} >
<Text style={{fontSize:15}}>Mark the dates and time you are available</Text>
<View style={styles.nurseCalendar} >
<CalendarPicker
dayShape='circle'
todayBackgroundColor={'#88B3F9'}
selectedDayTextColor={"#FFFFFF"}
selectedDayStyle={styles.calendarStyle}
nextTitle='>>>'
width={340}
height={342}
restrictMonthNavigation={true}
minDate={Date.now()}
onDateChange={this.handleDateChange}
previousTitle='<<<'
></CalendarPicker>
</View>
<View>/** no matter what i add here won't show however the view above will increase in height **/</View>
</ScrollView>
Here are the style properties i am using:
scrollMain:{
alignContent:'center',
flexDirection:'column',
paddingTop:25,
paddingLeft:25,
paddingRight:25,
backgroundColor:'#F7F9FC'
},
nurseCalendar:{
width:'90%',
alignSelf:'center',
marginTop:25,
height:'100%',
backgroundColor:'#fff',
flexWrap:'wrap'
},
calendarStyle:{
borderColor: '#6574CF',
backgroundColor: 'dodgerblue',
color: 'white',
borderWidth: 2,
borderRadius: 50,
}
How can I go about making a TextInput of password type like this in React Native? I want the input to turn into a black circle only like the default type, but I want it to customize according to my padding between each input.
You can use the modules you have without making them.
You can use react-native-pin-view
The way I'm using it
import PinView from "react-native-pin-view";
...
<PinView
onComplete={this.onFinishCheckingCode.bind(this)}
pinLength={4}
inputBgColor="#888888"
inputActiveBgColor="#ffd90d"
buttonBgColor="#ffffff"
buttonTextColor="black"
keyboardViewStyle={{
borderColor: "#dfdfdf",
borderWidth: 1,
width: windowHeight / 11,
height: windowHeight / 11
}}
inputViewStyle={{ width: 18, height: 18, marginRight: 20 }}
/>
I am trying to change the font color of a Semantic pre-made component. I am using this component in React.
I tried adding a id and class tag to the tag, but it did not work. I also tried targeting the entire body in my css file.
<Container text id="text1">
<Header
as='h1'
content='Gardenia'
inverted
style={{
fontSize: mobile ? '2em' : '4em',
fontWeight: 'normal',
marginBottom: 0,
marginTop: mobile ? '1.5em' : '1.5em',
}}
/>
#text1{
color: black;
}
You can see how to use preset colors for headers in the Semantic UI docs, if you want to define custom colors, Semantic UI has its own protocol for that which are utilized with custom class names.
I've tried to set the border-radius like this :
const styles = {
btn:{
height: 30,
fontSize: 11,
borderRadius: 50
}
}
It didn't work. I've read the documentation but can't find the answer.
Update (June 2020)
With the newer versions of material-ui, there no need for both props style and buttonStyle only style will be enough also, RaisedButton has been dropped with the migration from 0.x to 1.x being replaced now by variant="contained".
Here is a modern version of the code in the original answer
<Button variant="contained" color="secondary" style={{ borderRadius: 50 }}/>
https://codesandbox.io/s/rounded-raised-button-w86o8?file=/index.js:0-361
Original Answer (April 2018)
This works for me
<RaisedButton secondary buttonStyle={{ borderRadius: 50 }} style={{borderRadius:50}}>FF</RaisedButton>
Give both the style and buttonStyle. style covers the parent div inline styles
https://codesandbox.io/s/7o39499v9x
for mui v5 you do it with the sx property:
<Button sx={{ borderRadius: 12.5 }} />
The borderRadius properties multiples the value it receives by the theme.shape.borderRadius.
const theme = createTheme({
shape: {
borderRadius: 2, // defaults to 4
},
palette: {...},
});
I'm trying to figure out how use the Material UI v1 stepper in react, with my own font sizing.
The standard example imposes font sizing at this span class: MuiTypography-body1-99
I've tried adding fontSize properties to the label and MuiTypography classes in the const:
const styles = theme => ({
root: {
width: '80%',
marginLeft: '10%',
marginTop: '50px',
},
button: {
marginTop: theme.spacing.unit,
marginRight: theme.spacing.unit,
},
actionsContainer: {
marginBottom: theme.spacing.unit * 2,
},
resetContainer: {
padding: theme.spacing.unit * 3,
},
label: {
fontSize: '50%',
},
Typography: {
fontSize: '87%',
}
I can't add a class to the const styles with the name of the class in the UI theme, because the hyphen isn't recognised.
I can't add a fontSize attribute directly to the Typography and content elements on the page, (it gives an error saying fontSize is undefined).
<StepContent fontSize='120%'>
<Typography fontSize='120%'>{getStepContent(index)}</Typography>
How do you set a fontSize with the stepper?
if I understand your question correctly, you'd like to set the Stepper font-size so that the StepLabel or StepContent have a specific font-size.
This can be done by utilizing the style property that both the StepLabel and StepContent components have.
For example:
<Stepper>
<Step>
<StepLabel
style={{ fontSize: '150%', color: '#f00' }}
>
Create an ad
</StepLabel>
<StepContent
style={{ fontSize: '120%', color: 'hotpink' }}
>
<p>
For each ad campaign that you create, you can control how much
you're willing to spend on clicks and conversions, which networks
and geographical locations you want your ads to show on, and more.
</p>
</StepContent>
</Step>
</Stepper>
Hope that answers your question