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

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]);

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));

title="日付を設定する"
                        onPress={this.onOpendDtePicker}
                      />
                    
                  );
                }
              })()}
            
          
        )}
      
    );
  }
}

export default connectActionSheet(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,
  },

}
    );
  };
}

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

export default connectActionSheet(OptionsButton);

fontSize: 20,
    fontWeight: '600',
    color: theme().color.gray,
    paddingLeft: 1,
  },
  bottom: {
    height: 500,
    backgroundColor: '$background',
  },

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

export default connectActionSheet(App);

'Hello!\n\nThis is a simple example app to demonstrate @expo/react-native-action-sheet.'
            }
          
          {this._renderButtons()}
          {this._renderSelectionText()}
          
        
      
    );
  }
}

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

export default class AppContainer extends React.Component {
  render() {
    return (
      
        
      
    );
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  contentContainer: {

};

  return (
    
  );
};

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

export default connectActionSheet(MyPageScreen);

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));

/>
      );
    }

    return (
       this.onDelete()}
      />
    );
  }
}

export default connectActionSheet(Switch);

const styles = EStyleSheet.create({
  headerTitle: {
    color: '$headerText',
    fontWeight: '600',
  },
  headerLeft: {
    left: 5,
  },
  headerRight: {
    right: 10,
  },
});

};

  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)));