Hola amigos, intentemos crear una hoja de acción similar a iOS con React Native.

Configuración del proyecto React Native.

( Pase a la siguiente sección, si ya lo hizo... )

Adelante a este enlacehttps://reactnative.dev/docs/environment-setup#docsNavy siga los pasos para crear un nuevo proyecto nativo de reacción.

npx react-native init RNCustomActionSheet

return {
 <>
  <View>
  </View>
 <>
}

Creemos una carpeta src/actionSheety un archivo.index.js

Este será nuestro componente <ActionSheet/>.

Este componente requerirá una matriz de action itemsestructura como esta:

{
id: <Unique Id>,
label: '<Label for an action item>',
onPress: () => {
        
         <On Press Callback for the action item>
}
}

Este componente acepta una serie de elementos de acción y agrega un objeto al final.

{
id: '#cancel',
label: 'Cancel',
onPress: props?.onCancel
}

El componente tiene el estilo de una hoja de acción de iOS.

Todo lo que tenemos que hacer ahora es envolver el componente anterior dentro de un <Modal/> y colocarlo en la parte inferior de la pantalla.

Bien, veamos cómo funciona esto.

Funciona genial.
También puedes pasar actionTextColorpara cambiar el color de la etiqueta.

Esto también funciona bien en Android. Probémoslo con el color de texto diferente.

Bibliotecas utilizadas:

1. Reaccionar modal nativo

Puedes encontrar el repositorio aquí.

Si encuentra útil esta publicación de blog, compártala con un amigo.

Si encuentra alguna dificultad, no dude en agregar sus comentarios.