![38% of CISOs Fear They’re Not Moving Fast Enough on AI](https://cdn.sanity.io/images/cgdhsj6q/production/faa0bc28df98f791e11263f8239b34207f84b86f-1024x1024.webp?w=400&fit=max&auto=format)
Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
react-native-js-stepper
Advanced tools
React Native component to display a `Stepper`, a sequence of logical and numbered steps, frequently used for navigation.
React Native component to display a Stepper
, a sequence of logical and numbered steps, frequently used for navigation.
See more on:
https://material.io/guidelines/components/steppers.html
$ yarn add react-native-js-stepper
/* @flow */
import React from 'react'
import { StyleSheet } from 'react-native'
import Stepper from 'react-native-js-stepper'
type Props = {}
export default class ViewScreen extends React.Component<Props> {
render() {
return (
<Stepper
ref={(ref: any) => {
this.stepper = ref
}}
validation={false}
activeDotStyle={styles.activeDot}
inactiveDotStyle={styles.inactiveDot}
showTopStepper={true}
showBottomStepper={true}
steps={['Step 1', 'Step 2']}
backButtonTitle="BACK"
nextButtonTitle="NEXT"
activeStepStyle={styles.activeStep}
inactiveStepStyle={styles.inactiveStep}
activeStepTitleStyle={styles.activeStepTitle}
inactiveStepTitleStyle={styles.inactiveStepTitle}
activeStepNumberStyle={styles.activeStepNumber}
inactiveStepNumberStyle={styles.inactiveStepNumber}>
<View />
<View />
</Stepper>
)
}
}
const styles = StyleSheet.create({
activeDot: {
backgroundColor: 'grey'
},
inactiveDot: {
backgroundColor: '#ededed'
},
activeStep: {
backgroundColor: 'grey'
},
inactiveStep: {
backgroundColor: '#ededed'
},
activeStepTitle: {
fontWeight: 'bold'
},
inactiveStepTitle: {
fontWeight: 'normal'
},
activeStepNumber: {
color: 'white'
},
inactiveStepNumber: {
color: 'black'
}
})
Props | Type | Description | Required |
---|---|---|---|
initialPage | number | Index of initial page that should be selected | No |
onPressNext | Function | Function executed when Next button is pressed at the bottom | No |
onPressBack | Function | Function executed when Back button is pressed at the bottom | No |
onScrollPage | Function | Function executed when page is changed by scroll event | No |
textButtonStyle | Object | Text styles of the Back and Next buttons at the bottom | No |
backButtonTitle | string | Title of the Back button | No |
nextButtonTitle | string | Title of the Next button | No |
topStepperStyle | Object | Styles of the top stepper | No |
showTopStepper | boolean | If true shows the top stepper | No |
activeDotStyle | Object | Styles object of active dot at the bottom | No |
inactiveDotStyle | Object | Styles object of inactive dot at the bottom | No |
steps | Array | Array of strings that contains title of each step on the top stepper | No |
stepsTitleStyle | Object | Styles object for title of each step at top | No |
showBottomStepper | boolean | If true shows bottom stepper | No |
activeStepNumberStyle | Object | Styles object of number on active step | No |
inactiveStepNumberStyle | Object | Styles object of number on inactive step | No |
activeStepTitleStyle | Object | Styles object of title on active step | No |
inactiveStepTitleStyle | Object | Styles object of title on inactive step | No |
validation | boolean | Disables validation (related to top stepper numbers) | No |
MIT License
Copyright (c) 2018 InterfaceKit
Antonio Moreno Valls <amoreno at apsl.net>
Built with 💛 by APSL.
FAQs
React Native component to display a `Stepper`, a sequence of logical and numbered steps, frequently used for navigation.
The npm package react-native-js-stepper receives a total of 7 weekly downloads. As such, react-native-js-stepper popularity was classified as not popular.
We found that react-native-js-stepper demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.