Reputation: 755

React-Native alternative to AlertIOS.prompt for android?

I am following a tutorial for react-native, however they are doing it for IOS, there is one part where they use AlertIOS.prompt like this

AlertIOS.prompt(
  'Add New Item',
  null,
  [
    {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
    {
      text: 'Add',
      onPress: (text) => {
        this.itemsRef.push({ title: text })
      }
    },
  ],
  'plain-text'
);

I am trying to remake this for android but cannot get it working, I did find this https://www.npmjs.com/package/react-native-prompt

import Prompt from 'react-native-prompt';
<Prompt
title="Say something"
placeholder="Start typing"
defaultValue="Hello"
visible={ this.state.promptVisible }
onCancel={ () => this.setState({
  promptVisible: false,
  message: "You cancelled"
}) }
onSubmit={ (value) => this.setState({
  promptVisible: false,
  message: `You said "${value}"`
}) }/>

However I cannot get this to work either, It is supposed to display the prompt when I press a button but nothing happens..

Here is the full original code with AlertIOS

'use strict';

import React, {Component} from 'react';
import ReactNative from 'react-native';
const firebase = require('firebase');
const StatusBar = require('./components/StatusBar');
const ActionButton = require('./components/ActionButton');
const ListItem = require('./components/ListItem');
const styles = require('./styles.js')

const {
  AppRegistry,
  ListView,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  AlertIOS,
} = ReactNative;

// Initialize Firebase
const firebaseConfig = {
  apiKey: "AIzaSyA9y6Kv10CAl-QOnSkMehOyCUejwvKZ91E",
  authDomain: "dontforget.firebaseapp.com",
  databaseURL: "https://dontforget-bd066.firebaseio.com",
  storageBucket: "dontforget-bd066.appspot.com",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);

class dontforget extends Component {

  constructor(props) {
    super(props);
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      })
    };
    this.itemsRef = this.getRef().child('items');
  }

  getRef() {
    return firebaseApp.database().ref();
  }

  listenForItems(itemsRef) {
    itemsRef.on('value', (snap) => {

      // get children as an array
      var items = [];
      snap.forEach((child) => {
        items.push({
          title: child.val().title,
          _key: child.key
        });
      });

      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(items)
      });

    });
  }

  componentDidMount() {
    this.listenForItems(this.itemsRef);
  }

  render() {
    return (
      <View style={styles.container}>

        <StatusBar title="Grocery List" />

        <ListView
          dataSource={this.state.dataSource}
          renderRow={this._renderItem.bind(this)}
          enableEmptySections={true}
          style={styles.listview}/>

        <ActionButton onPress={this._addItem.bind(this)} title="Add" />
      </View>
    )

  }

  _addItem() {
    AlertIOS.prompt(
      'Add New Item',
      null,
      [
        {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
        {
          text: 'Add',
          onPress: (text) => {
            this.itemsRef.push({ title: text })
          }
        },
      ],
      'plain-text'
    );
  }
  
  
  
  
  _renderItem(item) {

    const onPress = () => {
      AlertIOS.alert(
        'Complete',
        null,
        [
          {text: 'Complete', onPress: (text) => this.itemsRef.child(item._key).remove()},
          {text: 'Cancel', onPress: (text) => console.log('Cancelled')}
        ]
      );
    };

    return (
      <ListItem item={item} onPress={onPress} />
    );
  }

}

AppRegistry.registerComponent('dontforget', () => dontforget);

Could anyone tell me how I could make this work for android?

Upvotes: 7

Answers (4)

Firuz

Reputation: 1

I developed a small utility to solve this issue. It might be useful.

https://github.com/eleviven/react-native-alertbox

Upvotes: 0

kepung

Reputation: 2132

I think you can use the following libraries : https://github.com/mmazzarolo/react-native-dialog

Example code to get user input are as follows (not in docs)

<Dialog.Container visible={true}>
          <Dialog.Title>Account delete</Dialog.Title>
          <Dialog.Description>
            Do you want to delete this account? You cannot undo this action.
          </Dialog.Description>
          <Dialog.Input label="Cancel" onChangeText={(text) => this.setState({username : text})}  />
          <Dialog.Button label="Delete" onPress={() => {
              console.log(this.state.username);
              this.setState({promptUser : false});
            }} />
        </Dialog.Container>

Upvotes: 2