How to do react native button by clicking icon alert ('OK')

Question

how to do react native button by clicking icon alert ('OK'), i want to place dots-three-vertical Thanks...


export default [
  {
    _id: '1001',
    name: 'Weeks',
    one: 'Monday',
    two: 'Tuesday',
    three: 'Wednesday',
    four: 'Thursday',
    five: 'Friday',
    six: 'Saturday',
    seven: 'Sunday',
  },


export default (props) => {
  const {object} = props.route.params;
  const {textContainer} = styles;

  return (
    <ScrollView>
      {Object.keys(object)
        .filter(
          (item) =>
            item !== '_id' &&
            item !== 'name' &&
        )
        .map((children) => (
          <Text key={children} style={textContainer}>
            {object[children]}
          </Text>
        ))}
    </ScrollView>
  );
};

look picture here dot-three-vertical icon example

So you have button event handler that creates an alert dialog, and you want to add an icon when the user confirms the dialog? — Noah Gaeta, Jan 13 '21 at 19:54

CoderLean · Accepted Answer · 2021-01-14T00:14:05.967

If you're asking how to implement the and have it display on the right, if you're using expo, you can import the correct Icon package from expo vector icons like so:

import { SimpleLineIcons } from '@expo/vector-icons';

Then create your scrollview like this:

<ScrollView>
      {Object.keys(object)
        .filter(
          (item) =>
            item !== '_id' &&
            item !== 'name' &&
        )
        .map((children) => (
        <View style={styles.listItem}>
        <Text key={children} style={textContainer}>
            {object[children]}
          </Text>
          
          <SimpleLineIcons name="options-vertical" size={24} color="red" />
        </View>
          
        ))}
    </ScrollView>
    
    
    const styles = StyleSheet.create({
    listItem : {
    padding : 10,
    flexDirection : "row",
    justifyContent : "space-between",
    alignItems : "center"
    }
    })

You can add an onPress listener on the icons to do whatever you want. If you want to show an alert, use Alert.alert() and configure it however you want.

kikirim · Answer 2 · 2021-01-16T17:54:29.423

Thank you so much;

<ScrollView>
      {Object.keys(object)
        .filter(
          (item) =>
            item !== '_id' &&
            item !== 'name' &&
        )
        .map((children) => (
        <View style={styles.listItem}>
        <Text key={children} style={textContainer}>
            {object[children]}
          </Text>
          
          <SimpleLineIcons name="options-vertical" size={24} color="red" />
        </View>
          
        ))}
    </ScrollView>
    
    
    const styles = StyleSheet.create({
    listItem : {
    padding : 10,
    flexDirection : "row",
    justifyContent : "space-between",
    alignItems : "center"
    }
    })

How to do react native button by clicking icon alert ('OK')

2 Answers2