dancormier / react-native-swipeout

iOS-style swipeout buttons behind component
MIT License
2.62k stars 645 forks source link

Expo doesn't like react-native-swipeout #333

Open eleallegue opened 5 years ago

eleallegue commented 5 years ago

I am coming here for help with the following problem:

I have this code: https://snack.expo.io/@guardme/1f5b93 you can look at it in that url, and anyway, I put it here:

import React, { Component } from 'react';
import { ScrollView, Image, Text, View, Platform } from 'react-native';
import { Icon } from 'expo';
import Swipeout from 'react-native-swipeout';

import styles from './styles';

var protegees = [];

export default class MyProtegeesScreen extends Component {
  componentWillMount() {
    this.loadUsers();
  }

  deleteAction = userInfo => {
    alert(userInfo.u_email);
  };

  loadUsers() {
    var aux = [
      {
        u_id: 'kajfdksnvkjs',
        u_email: 'pepaperez@gmail.com',
        u_name: 'Pepa',
        u_surname: 'Perez',
        u_pic: 'https://facebook.github.io/react-native/img/favicon.png',
      },
      {
        u_id: 'kajsbciuksnrk',
        u_email: 'wepa@gmail.com',
        u_name: 'Weee',
        u_surname: 'Paaaa',
        u_pic: 'https://facebook.github.io/react-native/img/favicon.png',
      },
    ];
    protegees = aux;
  }

  renderUsers() {
    return protegees.map(userInfo => {
      return (
        <Swipeout
          right={[
            {
              backgroundColor: '#fff',
              component: (
                <View style={styles.swipeoutSide}>
                  <Icon.Ionicons
                    size={30}
                    color="#dc3545"
                    name={
                      Platform.OS === 'ios' ? `ios-trash-outline` : 'md-trash'
                    }
                  />
                </View>
              ),
              onPress: () => {
                this.deleteAction(userInfo);
              },
            },
          ]}
          style={styles.swipe}>
          <View style={styles.container} key={userInfo.u_id}>
            <Image style={styles.avatar} source={{ uri: userInfo.u_pic }} />
            <View style={styles.containerUserData}>
              <Text style={styles.userName}>
                {userInfo.u_name} {userInfo.u_surname}
              </Text>
              <Text style={styles.userEmail}>{userInfo.u_email}</Text>
            </View>
          </View>
        </Swipeout>
      );
    });
  }

  render() {
    return <ScrollView>{this.renderUsers()}</ScrollView>;
  }
}

I was trying this code before entering it in my Expo app. When I introduce it there, Swipeout crashes the app with this error (it does not render, but when I remove the Swipeout part, it does):

image

And my dependencies are the following:

"dependencies": {
    "@expo/samples": "2.1.1",
    "braces": "^2.3.2",
    "expo": "^32.0.6",
    "expo-app-auth": "^3.0.0",
    "firebase": "^5.8.5",
    "react": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-native-elements": "^1.1.0",
    "react-native-gifted-chat": "^0.7.3",
    "react-native-paper": "^2.16.0",
    "react-native-phone-call": "^1.0.9",
    "react-native-swipeout": "^2.3.6",
    "react-navigation": "^3.0.9"
  },
SirPhemmiey commented 4 years ago

Hey @eleallegue , did you manage to fix this?