How to use @expo/react-native-action-sheet - 10 common examples

To help you get started, we’ve selected a few @expo/react-native-action-sheet examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github dooboolab / hackatalk-mobile / src / components / screen / ProfileUpdate.tsx View on Github external
function Screen(props: Props): React.ReactElement {
  const [isUpdating, setIsUpdating] = useState(false);
  const [displayName, setDisplayName] = useState('');
  const [statusMsg, setStatusMsg] = useState('');
  const { showActionSheetWithOptions } = useActionSheet();
  const [profilePath, setProfilePath] = useState('');

  useEffect(() => {
    if (isUpdating) {
      try {
        if (props.navigation) {
          props.navigation.goBack();
        }
      } catch (err) {
        // console.error(err);
      } finally {
        setIsUpdating(false);
      }
    }
  }, [isUpdating]);
github zulip / zulip-mobile / src / message / MessageList.js View on Github external
anchor: props.anchor || getAnchorForActiveNarrow(props.narrow)(state),
  auth: getAuth(state),
  debug: getDebug(state),
  fetching: props.fetching || getFetchingForActiveNarrow(props.narrow)(state),
  flags: getFlags(state),
  messages: props.messages || getShownMessagesForNarrow(props.narrow)(state),
  mute: getMute(state),
  ownEmail: getOwnEmail(state),
  realmEmoji: getAllRealmEmojiById(state),
  twentyFourHourTime: getRealm(state).twentyFourHourTime,
  renderedMessages: props.renderedMessages || getRenderedMessages(props.narrow)(state),
  showMessagePlaceholders:
    props.showMessagePlaceholders || getShowMessagePlaceholders(props.narrow)(state),
  subscriptions: getSubscriptions(state),
  typingUsers: props.typingUsers || getCurrentTypingUsers(props.narrow)(state),
}))(connectActionSheet(MessageList));
github wheatandcat / Peperomia / PeperomiaNative / src / components / templates / CreatePlan / Page.tsx View on Github external
title="日付を設定する"
                        onPress={this.onOpendDtePicker}
                      />
                    </View>
                  );
                }
              })()}
            </View>
          </>
        )}
      </ThemeConsumer>
    );
  }
}

export default connectActionSheet<PropsBase>(Page);

const styles = EStyleSheet.create({
  titleInput: {
    width: '100%',
    color: theme().color.darkGray,
    fontSize: 22,
    fontWeight: '600',
    paddingLeft: 15,
  },
  body: {
    backgroundColor: '$background',
    height: '100%',
  },
  dateButtonContainer: {
    padding: 30,
  },
github expo / expo / home / components / OptionsButton.js View on Github external
}
    );
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingRight: 15,
  },
});

export default connectActionSheet(OptionsButton);
github wheatandcat / Peperomia / PeperomiaNative / src / components / templates / CreateScheduleDetail / Page.tsx View on Github external
fontSize: 20,
    fontWeight: '600',
    color: theme().color.gray,
    paddingLeft: 1,
  },
  bottom: {
    height: 500,
    backgroundColor: '$background',
  },

  keyboardClose: {
    paddingRight: 5,
  },
});

export default connectActionSheet<PropsBase>(App);
github expo / react-native-action-sheet / example / App.tsx View on Github external
'Hello!\n\nThis is a simple example app to demonstrate @expo/react-native-action-sheet.'
            }
          </Text>
          {this._renderButtons()}
          {this._renderSelectionText()}
          <Text style={styles.notes}>
            Note: Icons and custom text styles are only available on Android. Separators can only be
            toggled on Android; they always show on iOS.
          </Text>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const ConnectedApp = connectActionSheet<{}>(App);

export default class AppContainer extends React.Component {
  render() {
    return (
      <ActionSheetProvider>
        <ConnectedApp />
      </ActionSheetProvider>
    );
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  contentContainer: {
github Naturalclar / expo-typescript-starter / src / screens / MyPageScreen.tsx View on Github external
};

  return (
    <View>
      <TouchableOpacity onPress={onOpenActionSheet}>
        <Text>Hello World!</Text>
      </TouchableOpacity>
    </View>
  );
};

MyPageScreen.navigationOptions = {
  title: "MyPage"
};

export default connectActionSheet(MyPageScreen);
github zulip / zulip-mobile / src / render-native / MessageContainer.js View on Github external
realm={auth.realm}
        auth={auth}
        actions={actions}
        onLinkPress={actions.messageLinkPress}
      />
    );
  }
}

export default connectWithActions(state => ({
  auth: getAuth(state),
  currentRoute: getCurrentRoute(state),
  flags: getFlags(state),
  twentyFourHourTime: getRealm(state).twentyFourHourTime,
  subscriptions: getSubscriptions(state),
}))(connectActionSheet(MessageContainer));
github wheatandcat / Peperomia / PeperomiaNative / src / components / pages / Schedule / Switch.tsx View on Github external
/>
      );
    }

    return (
      <Schedule
        navigation={this.props.navigation}
        onAdd={this.props.onAdd}
        onSort={this.props.onSort}
        onDelete={() => this.onDelete()}
      />
    );
  }
}

export default connectActionSheet(Switch);

const styles = EStyleSheet.create({
  headerTitle: {
    color: '$headerText',
    fontWeight: '600',
  },
  headerLeft: {
    left: 5,
  },
  headerRight: {
    right: 10,
  },
});
github zulip / zulip-mobile / src / webview / MessageList.js View on Github external
};

  return {
    backgroundData,
    anchor: props.anchor !== undefined ? props.anchor : getAnchorForNarrow(props.narrow)(state),
    fetching: props.fetching || getFetchingForNarrow(props.narrow)(state),
    messages: props.messages || getShownMessagesForNarrow(state, props.narrow),
    renderedMessages: props.renderedMessages || getRenderedMessages(props.narrow)(state),
    showMessagePlaceholders:
      props.showMessagePlaceholders !== undefined
        ? props.showMessagePlaceholders
        : getShowMessagePlaceholders(props.narrow)(state),
    theme: getSettings(state).theme,
    typingUsers: props.typingUsers || getCurrentTypingUsers(state, props.narrow),
  };
})(connectActionSheet(withGetText(MessageList)));

@expo/react-native-action-sheet

A cross-platform ActionSheet for React Native

MIT
Latest version published 23 days ago

Package Health Score

84 / 100
Full package analysis