GeekyAnts / NativeBase

Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.
https://nativebase.io/
MIT License
20.19k stars 2.39k forks source link

Problem with exponent and the version 2 #496

Closed EQuimper closed 7 years ago

EQuimper commented 7 years ago

Hey guys, first thing awesome work. I have an app on exponent v13 where I start to build with the old version. This morning I update for the version 2 and now everything is broken. The icon don't appear etc. I have link with react-native-link and get no error.

If you see the image there this is my problem. First thing some icon not appear at the header and at the footer. Second thing now my image don't show anymore. (I didn't change the src was working 1 h ago). If you see the image the card at the top have no share icon but the second one yes ?

import React, { Component } from 'react';
import { View, Image, Text, Share } from 'react-native';
import { Card, CardItem, Left, Body, Button, Right } from 'native-base';
import Lightbox from 'react-native-lightbox';
import { FontAwesome, Ionicons } from '@exponent/vector-icons';
import * as Animatable from 'react-native-animatable';
import styles, { nStyles } from './styles/ImageItem';
import Colors from '../../../../constants/Colors';
import ModalText from './ModalText';
import ModalSuccess from './ModalSuccess';
import '../../../helpers/Animations';

class ImageItem extends Component {
  state = {
    textModal: false,
    error: false,
    successModal: false,
    liked: false
  }

  _toggleTextModal = () => this.setState({ textModal: !this.state.textModal })

  _toggleSuccessModal = () => this.setState({ successModal: !this.state.successModal })

  _openShare = () => {
    Share.share({
      message: this.props.data.text,
      url: this.props.data.image_url,
      title: 'Cute!'
    })
    .then(this._checkResult)
    .catch(e => this.setState({ error: e.message }));
  }

  _checkResult = result => {
    if (result.action !== 'dismissedAction') {
      this._toggleSuccessModal();
    }
  }

  _clickButtonLiked = () => {
    this.setState({ liked: !this.state.liked }, () => {
      if (!this.state.liked) {
        this.heart.whenIsBeenDisliked(1250);
      }
    });
  };

  render() {
    const { data } = this.props;
    return (
      <View style={styles.root}>
        <Card>
          <CardItem style={nStyles.cardHeader}>
            <View style={styles.headerAuthor}>
              <Text style={styles.authorText}>Author</Text>
            </View>
          </CardItem>
          <CardItem cardBody>
            <Lightbox>
              <Image
                key={data.key}
                style={{ resizeMode: 'cover', width: null, height: 300 }}
                source={{ uri: data.image_url }}
              />
            </Lightbox>
          </CardItem>
          <CardItem>
            <Left>
              <Button transparent onPress={this._toggleTextModal}>
                <Ionicons name="ios-text" size={40} color={Colors.yellowColor} />
              </Button>
            </Left>
            <Body>
              <Button transparent onPress={this._clickButtonLiked}>
                <Animatable.View
                  ref={ref => this.heart = ref} // eslint-disable-line
                  style={styles.cardItem}
                  duration={1000}
                  animation={this.state.liked ? 'whenIsLiked' : null}
                  iterationCount={this.state.liked ? 3 : 1}
                >
                  <FontAwesome
                    name={this.state.liked ? 'heart' : 'heart-o'}
                    size={this.state.liked ? 50 : 30} color={Colors.redColor}
                  />
                </Animatable.View>
              </Button>
            </Body>
            <Right>
              <Button transparent onPress={this._openShare}>
                <FontAwesome name="share-alt" size={30} color={Colors.blueColor} />
              </Button>
            </Right>
          </CardItem>
        </Card>
        <ModalText
          visible={this.state.textModal}
          text={data.text}
          onPress={this._toggleTextModal}
        />
        <ModalSuccess
          visible={this.state.successModal}
          onPress={this._toggleSuccessModal}
        />
      </View>
    );
  }
}

export default ImageItem;
shivrajkumar commented 7 years ago

You can take a look at NativeBase demoApp with exponent https://github.com/GeekyAnts/NativeBase-KitchenSink/tree/exponent