Research
Recent Trends in Malicious Packages Targeting Discord
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
react-native-progress-steps
Advanced tools
Readme
A simple and fully customizable React Native component that implements a progress stepper UI.
Example One | Example Two |
---|---|
examples/ExampleOne.js | examples/ExampleTwo.js |
If using yarn:
yarn add react-native-progress-steps
If using npm:
npm i react-native-progress-steps
import { ProgressSteps, ProgressStep } from 'react-native-progress-steps';
Simply place a <ProgressStep />
tag for each desired step within the <ProgressSteps />
wrapper.
<View style={{flex: 1}}>
<ProgressSteps>
<ProgressStep label="First Step">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 1!</Text>
</View>
</ProgressStep>
<ProgressStep label="Second Step">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 2!</Text>
</View>
</ProgressStep>
<ProgressStep label="Third Step">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 3!</Text>
</View>
</ProgressStep>
</ProgressSteps>
</View>
Button container and text are fully customizable using the nextBtnStyle, nextBtnTextStyle, previousBtnStyle, and previousBtnTextStyle
props.
Example usage to change a buttons text color:
const buttonTextStyle = {
color: '#393939'
};
return (
<View style={{flex: 1}}>
<ProgressSteps>
<ProgressStep label="First Step" nextBtnTextStyle={buttonTextStyle} previousBtnTextStyle={buttonTextStyle}>
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 1!</Text>
</View>
</ProgressStep>
<ProgressStep label="Second Step" nextBtnTextStyle={buttonTextStyle} previousBtnTextStyle={buttonTextStyle}>
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 2!</Text>
</View>
</ProgressStep>
</ProgressSteps>
</View>
)
The errors
prop should be used if there's a need for validation and error handling when clicking the next button. If you would like to prevent the next step from being rendered, set the errors
prop to true
. By default, it will be false
.
Example usage of validation check:
state = {
isValid: false,
errors: false
};
onNextStep = () => {
if (!this.state.isValid) {
this.setState({ errors: true });
} else {
this.setState({ errors: false });
}
};
render() {
return (
<View style={{ flex: 1 }}>
<ProgressSteps>
<ProgressStep label="First Step" onNext={this.onNextStep} errors={this.state.errors}>
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 1!</Text>
</View>
</ProgressStep>
<ProgressStep label="Second Step">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 2!</Text>
</View>
</ProgressStep>
</ProgressSteps>
</View>
);
}
Name | Description | Default | Type |
---|---|---|---|
borderWidth | Width of the progress bar between steps | 6 | Number |
borderStyle | Type of border for the progress bar | solid | String |
activeStepIconBorderColor | Outside border color for the active step | #4bb543 | String |
progressBarColor | Color of the default progress bar | #ebebe4 | String |
completedProgressBarColor | Color of the completed progress bar | #4bb543 | String |
activeStepIconColor | Color of the active step icon | transparent | String |
completedStepIconColor | Color of the completed step icon | #4bb543 | String |
disabledStepIconColor | Color of the disabled step icon | #ebebe4 | String |
labelFontFamily | Font family for the step icon label | iOS/Android default font | String |
labelColor | Color of the default label | lightgray | String |
activeLabelColor | Color of the active label | #4bb543 | String |
activeStepNumColor | Color of the active step number | black | String |
completedStepNumColor | Color of the completed step number | black | String |
disabledStepNumColor | Color of the disabled step number | white | String |
completedCheckColor | Color of the completed step checkmark | white | String |
Name | Description | Default | Type |
---|---|---|---|
label | Title of the current step to be displayed | null | String |
onNext | Function called when the next step button is pressed | null | Func |
onPrevious | Function called when the previous step button is pressed | null | Func |
onSubmit | Function called when the submit step button is pressed | null | Func |
nextBtnText | Text to display inside the next button | Next | String |
previousBtnText | Text to display inside the previous button | Previous | String |
finishBtnText | Text to display inside the button on the last step | Submit | String |
nextBtnStyle | Style object to provide to the next/finish buttons | { textAlign: 'center', padding: 8 } | Object |
nextBtnTextStyle | Style object to provide to the next/finish button text | { color: '#007aff', fontSize: 18 } | Object |
nextBtnDisabled | Value to disable/enable next button | false | Boolean |
previousBtnStyle | Style object to provide to the previous button | { textAlign: 'center', padding: 8 } | Object |
previousBtnTextStyle | Style object to provide to the previous button text | { color: '#007aff', fontSize: 18 } | Object |
previousBtnDisabled | Value to disable/enable previous button | false | Boolean |
centerContainer | Value that decides whether to center content inside ScrollView container | false | Boolean |
errors | Used to assist with current step validation. If true, the next step won't be rendered | false | Boolean |
Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.
Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub
Colby Miller | https://colbymillerdev.com
FAQs
A simple and fully customizable React Native component that implements a progress stepper UI.
We found that react-native-progress-steps 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.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
Security News
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.