react-native-progress-steps-screens v1.3.6

react-native-progress-steps-screens

Un componente simple y totalmente personalizable de React Native que implementa una interfaz de usuario de pasos de progreso.

• El contenido de cada paso se muestra dentro de un ScrollView personalizable.
• Botones totalmente personalizables se muestran en la parte inferior del componente para moverse entre los pasos.

Ejemplo Uno	Ejemplo Dos
examples/ExampleOne.js	examples/ExampleTwo.js

Instalación

Si usas yarn:

yarn add react-native-progress-steps-screens

Si usas npm:

npm i react-native-progress-steps-screens

Uso

import { ProgressSteps, ProgressStep } from 'react-native-progress-steps-screens';

Simplemente coloca una etiqueta <ProgressStep /> para cada paso deseado dentro del contenedor <ProgressSteps />.

<View style={{flex: 1}}>
    <ProgressSteps>
        <ProgressStep label="Primer Paso">
            <View style={{ alignItems: 'center' }}>
                <Text>¡Este es el contenido del paso 1!</Text>
            </View>
        </ProgressStep>
        <ProgressStep label="Segundo Paso">
            <View style={{ alignItems: 'center' }}>
                <Text>¡Este es el contenido del paso 2!</Text>
            </View>
        </ProgressStep>
        <ProgressStep label="Tercer Paso">
            <View style={{ alignItems: 'center' }}>
                <Text>¡Este es el contenido del paso 3!</Text>
            </View>
        </ProgressStep>
    </ProgressSteps>
</View>

Uso de Estilo de Botones

El contenedor y el texto de los botones son totalmente personalizables usando las propiedades nextBtnStyle, nextBtnTextStyle, previousBtnStyle, y previousBtnTextStyle.

Ejemplo de uso para cambiar el color del texto de un botón:

const buttonTextStyle = {
    color: '#393939'
};

return (
    <View style={{flex: 1}}>
        <ProgressSteps>
            <ProgressStep label="Primer Paso" nextBtnTextStyle={buttonTextStyle} previousBtnTextStyle={buttonTextStyle}>
                <View style={{ alignItems: 'center' }}>
                    <Text>¡Este es el contenido del paso 1!</Text>
                </View>
            </ProgressStep>
            <ProgressStep label="Segundo Paso" nextBtnTextStyle={buttonTextStyle} previousBtnTextStyle={buttonTextStyle}>
                <View style={{ alignItems: 'center' }}>
                    <Text>¡Este es el contenido del paso 2!</Text>
                </View>
            </ProgressStep>
        </ProgressSteps>
    </View>
)

Manejo de Errores y Validación del Paso Actual

La propiedad errors debe usarse si hay necesidad de validación y manejo de errores al hacer clic en el botón siguiente. Si deseas evitar que se renderice el siguiente paso, establece la propiedad errors en true. Por defecto, será false.

Ejemplo de uso de verificación de validación:

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="Primer Paso" onNext={this.onNextStep} errors={this.state.errors}>
            <View style={{ alignItems: 'center' }}>
              <Text>¡Este es el contenido del paso 1!</Text>
            </View>
          </ProgressStep>
          <ProgressStep label="Segundo Paso">
            <View style={{ alignItems: 'center' }}>
              <Text>¡Este es el contenido del paso 2!</Text>
            </View>
          </ProgressStep>
        </ProgressSteps>
      </View>
    );
}

Documentación

Componente de Pasos de Progreso

Componente de Paso de Progreso

Contribuciones

¡Las solicitudes de contribución siempre son bienvenidas! Siéntete libre de abrir un nuevo problema en GitHub para cualquier cambio que se pueda hacer.

¿Trabajando en tu primera solicitud de contribución? Puedes aprender cómo hacerlo en esta serie gratuita Cómo Contribuir a un Proyecto de Código Abierto en GitHub

Autor

Autor Original - Colby Miller | https://tahelromero.com

Licencia

MIT

# react-native-progress-steps-screens

Un componente simple y totalmente personalizable de React Native que implementa una interfaz de usuario de pasos de progreso.
* El contenido de cada paso se muestra dentro de un ScrollView personalizable.
* Botones totalmente personalizables se muestran en la parte inferior del componente para moverse entre los pasos.

Ejemplo Uno             |  Ejemplo Dos
:-------------------------:|:-------------------------:
![](assets/react-native-progress-steps-screens_1.gif) [examples/ExampleOne.js](examples/ExampleOne.js)| ![](assets/react-native-progress-steps-screens_2.gif) [examples/ExampleTwo.js](examples/ExampleTwo.js)

## Instalación

Si usas yarn:

yarn add react-native-progress-steps-screens

Si usas npm:

npm i react-native-progress-steps-screens

Si usas npm:

import { ProgressSteps, ProgressStep } from 'react-native-progress-steps-screens';

Simplemente coloca una etiqueta `<ProgressStep />` para cada paso deseado dentro del contenedor `<ProgressSteps />`.

<View style={{ flex: 1 }}> {" "} {" "} {" "} <View style={{ alignItems: "center" }}> {" "} ¡Este es el contenido del paso 1!{" "} {" "} {" "} {" "} <View style={{ alignItems: "center" }}> {" "} ¡Este es el contenido del paso 2!{" "} {" "} {" "} {" "} <View style={{ alignItems: "center" }}> {" "} ¡Este es el contenido del paso 3!{" "} {" "} {" "} {" "}

### Uso de Estilo de Botones
El contenedor y el texto de los botones son totalmente personalizables usando las propiedades `nextBtnStyle, nextBtnTextStyle, previousBtnStyle, y previousBtnTextStyle`.

Ejemplo de uso para cambiar el color del texto de un botón:

const buttonTextStyle = { color: "#393939" };

return ( <View style={{ flex: 1 }}> {" "} {" "} <ProgressStep label="Primer Paso" nextBtnTextStyle={buttonTextStyle} previousBtnTextStyle={buttonTextStyle}

  >
    {" "}
    <View style={{ alignItems: "center" }}>
      {" "}
      <Text>¡Este es el contenido del paso 1!</Text>{" "}
    </View>{" "}
  </ProgressStep>{" "}
  <ProgressStep
    label="Segundo Paso"
    nextBtnTextStyle={buttonTextStyle}
    previousBtnTextStyle={buttonTextStyle}
  >
    {" "}
    <View style={{ alignItems: "center" }}>
      {" "}
      <Text>¡Este es el contenido del paso 2!</Text>{" "}
    </View>{" "}
  </ProgressStep>{" "}
</ProgressSteps>{" "}

Current Step Error and Validation Handling

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>
    );
}

Documentation

Progress Steps Component

Progress Step Component

Contributing

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

Author

Original Autor - Colby Miller | https://colbymillerdev.com

License

MIT