React-native Elements Button Group

I’ve been following Expo’s introductory tutorial for an image picker, with the minor changes of using TypeScript in a Bottom Tab Navigator and Isolating it to its own component. All of that seems to be working as expected.

But now I’m trying to move the functionality of the buttons into react-native Elements Button Group and I don’t see how I’m supposed to move the functionality to the buttons. I even tried the second example where it uses components, but I got the error of not putting const in classes, I tried moving them out of the class, but then it loses the functionality of which one is selected defeating the purpose anyway

https://turtlewolfe.github.io/imagePicker/

Because it’s hosted on the web, you’ll have to click the link to the home page to see where it would start on mobile.

repo Source Code

Screenshot from 2021-04-04 12-09-27

components/elements/ImageButtons.tsx

// rnpce
import React, { PureComponent } from 'react'
import { Text, View } from 'react-native'
import { ButtonGroup } from 'react-native-elements/'
export class ImageButtons extends PureComponent {
  constructor() {
    super()
    this.state = {
      selectedIndex: 2
    }
    this.updateIndex = this.updateIndex.bind(this)
  }

  updateIndex(selectedIndex) {
    this.setState({ selectedIndex })
  }

  render() {
    const buttons = ['Camera', 'Gallery', 'Share']
    const { selectedIndex } = this.state

    return (
      <ButtonGroup
        onPress={this.updateIndex}
        selectedIndex={selectedIndex}
        buttons={buttons}
        containerStyle={{ height: 45, width: 200 }}
      />
    )
  }
}

export default ImageButtons

or using components

constructor () {
  super()
  this.state = {
    selectedIndex: 2
  }
  this.updateIndex = this.updateIndex.bind(this)
}
updateIndex (selectedIndex) {
  this.setState({selectedIndex})
}

const component1 = () => <Text>Hello</Text>
const component2 = () => <Text>World</Text>
const component3 = () => <Text>ButtonGroup</Text>

render () {
  const buttons = [{ element: component1 }, { element: component2 }, { element: component3 }]
  const { selectedIndex } = this.state
  return (
    <ButtonGroup
      onPress={this.updateIndex}
      selectedIndex={selectedIndex}
      buttons={buttons}
      containerStyle={{height: 100}} />
  )
}

components/imagePicker.tsx

import React, { Component } from 'react'
import { Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
// import logo from '../assets/images/logo.png';
import * as ImagePicker from 'expo-image-picker';
import * as Sharing from 'expo-sharing';
import uploadToAnonymousFilesAsync from 'anonymous-files';
import ImageButtons from '../components/elements/ImageButtons'
const imagePicker = () => {
  // render() {

  const [selectedImage, setSelectedImage] = React.useState(null);

  let openImagePickerAsync = async () => {
    let permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();

    if (permissionResult.granted === false) {
      alert("Permission to access camera roll is required!");
      return;
    }

    let pickerResult = await ImagePicker.launchImageLibraryAsync();
    // console.log(pickerResult);
    if (pickerResult.cancelled === true) {
      return;
    }

    if (Platform.OS === 'web') {
      let remoteUri = await uploadToAnonymousFilesAsync(pickerResult.uri);
      setSelectedImage({ localUri: pickerResult.uri, remoteUri });
    } else {
      setSelectedImage({ localUri: pickerResult.uri, remoteUri: null });
    }
  };

  let openShareDialogAsync = async () => {
    if (!(await Sharing.isAvailableAsync())) {
      alert(`The image is available for sharing at: ${selectedImage.remoteUri}`);
      return;
    }

    await Sharing.shareAsync(selectedImage.localUri);
  };

  if (selectedImage !== null) {
    return (
      <View style={styles.container}>
        <Image
          source={{ uri: selectedImage.localUri }}
          style={styles.thumbnail}
        />
        {/* <Text style={styles.instructions}>
          To share a photo from your phone with a friend,
          </Text>
          <Text style={styles.instructions}>
          just press the button below!
        </Text> */}
        <ImageButtons />
        <TouchableOpacity
          onPress={openImagePickerAsync}
          style={styles.button}>
          <Text style={styles.buttonText}>Pick a photo</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={openShareDialogAsync} style={styles.button}>
          <Text style={styles.buttonText}>Share this photo</Text>
        </TouchableOpacity>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Image source={{ uri: "https://i.imgur.com/TkIrScD.png" }} style={styles.logo} />
      <Text style={styles.instructions}>
        To share a photo from your phone with a friend,
          </Text>
      <Text style={styles.instructions}>
        just press the button below!
          </Text>
      <ImageButtons />
      <TouchableOpacity
        onPress={openImagePickerAsync}
        style={styles.button}>
        <Text style={styles.buttonText}>Pick a photo</Text>
      </TouchableOpacity>
    </View>
  )
}
// }

export default imagePicker

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#888',
    alignItems: 'center',
    justifyContent: 'center',
  },
  logo: {
    width: 305,
    height: 159,
    marginBottom: 20,
  },
  instructions: {
    color: '#ccc',
    fontSize: 18,
    marginHorizontal: 15,
    marginBottom: 7,
  },
  button: {
    backgroundColor: "blue",
    padding: 15,
    borderRadius: 5,
    marginBottom: 15,
  },
  buttonText: {
    fontSize: 20,
    color: '#fff',
  },
  thumbnail: {
    width: 300,
    height: 300,
    resizeMode: "contain",
    // Try switching it from contain to stretch or cover 
    marginBottom: 20,
  }
});

sudo npm install -g expo-cli
expo init imagePicker --npm
cd imagePicker
npm i -D gh-pages
git remote add origin https://github.com/TurtleWolfe/imagePicker.git
git push --set-upstream origin master
npm run deploy

Picking an image

expo install expo-image-picker
expo install expo-sharing
expo install anonymous-files
npx expo-optimize
expo publish

Sharing the image

Publish and share your app

ReactNativeFieldGuide

React Native Elements & docs 77.9k

npm install react-native-elements --save

Native Base & docs 52.3k

React Native Paper & docs 31.2k

React Native Material UI & docs 2.5k

React Native UI Kitten & docs 2k

React Native UI Lib & docs 997

React Native iOS Kit & docs 58

I published to expo but it was too late to edit the original post

I deleted the const and add .this further down