Some information

[Angelk90]

Hi @jeremybarbet , Where can I find the source code shown in the expo example at the following link: https://expo.io/@jeremdsgn/react-native-modalize

[jeremybarbet]

Hey!

This is the first example I made using Expo. Now I move it to another directory, it's now here: https://github.com/jeremybarbet/react-native-modalize/tree/master/examples/expo

react-native-modalize/shared is located here: https://github.com/jeremybarbet/react-native-modalize/tree/master/examples-shared

[Angelk90]

@jeremybarbet : I'm not able to understand.
I tried that code on expo but it does not work and it does not seem to me the same as the examples.
For example, to let you know where I can find the code to see this:

[jeremybarbet]

Yes I'm aware of the issue with the examples right now, I have a ticket for that on the project board. They don't work anymore because of some packages coalitions.

If you create your own app with expo you won't get any of the issue you saw.

[Angelk90]

@jeremybarbet :
I can kindly ask you if you can publish an example that I can see and try on https://snack.expo.io/.
The examples you see in the images you see in the readme file, I mean.

[jeremybarbet]

The example you are looking for is here: https://github.com/jeremybarbet/react-native-modalize/blob/master/examples-shared/src/components/modals/SnappingList.tsx

Also, I'm aware there is a swipe gesture issue. It's related to the expo, expo-sdk and the react-native-gesture-handler latest version. More information about it here: #23

If you want to run it locally successfully:

expo init my-test
yarn add react-native-modalize

go to package.json and change expoand expo-sdk to 31.*

{
  ...
  "dependencies": {
    "expo": "^31.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
    "react-native-modalize": "^1.0.0-alpha.22"
  },
  ...
}

then copy/paste into App.js

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import Modalize from 'react-native-modalize';

export default class App extends React.Component {

  modal = React.createRef();

  renderHeader = () => (
    <View style={s.modal__header}>
      <Text style={s.modal__headerText}>50 users online</Text>
    </View>
  )

  renderContent = () => (
    <View style={s.content}>
      {[...Array(50).keys()].map((_, i) => (
        <View style={s.content__row} key={i}>
          <View style={s.content__avatar}>
            <Image
              style={{ width: '100%', height: '100%' }}
              source={{ uri: 'https://ctvalleybrewing.com/wp-content/uploads/2017/04/avatar-placeholder.png' }}
            />
          </View>

          <Text style={s.content__name}>Username</Text>
        </View>
      ))}
    </View>
  )

  openModal = () => {
    if (this.modal.current) {
      this.modal.current.open();
    }
  }

  render() {
    return (
      <>
        <Text
          style={{ alignSelf: 'center', marginTop: 80 }}
          onPress={this.openModal}
        >
          Open Modalize
        </Text>

        <Modalize
          ref={this.modal}
          HeaderComponent={this.renderHeader}
          height={350}
        >
          {this.renderContent()}
        </Modalize>
      </>
    );
  }
}

const s = StyleSheet.create({
  modal__header: {
    paddingVertical: 15,
    marginHorizontal: 15,

    borderBottomColor: '#eee',
    borderBottomWidth: 1,
  },

  modal__headerText: {
    fontSize: 15,
    fontWeight: '200',
  },

  content: {
    paddingHorizontal: 15,
  },

  content__row: {
    flexDirection: 'row',
    alignItems: 'center',

    paddingVertical: 15,

    borderBottomColor: '#f9f9f9',
    borderBottomWidth: 1,
  },

  content__avatar: {
    width: 38,
    height: 38,

    marginRight: 15,

    overflow: 'hidden',

    backgroundColor: '#eee',
    borderRadius: 19,
  },

  content__name: {
    fontSize: 16,
  },

  content__button: {
    alignItems: 'center',
    justifyContent: 'center',

    marginVertical: 20,
  },
});

Somehow it doesn't work on snack.expo, not sure why.

[jeremybarbet]

I'm closing this issue. Even though I'll simplify the examples in a next release to remove all the shared stuff that are too complex