Question: Does this support Android?

[amyb87]

Does this support Android? I don't see any documentation on additional support/setup for Android. I saw that it is supposed to support iOS and Android but I cannot see the Action button when I am testing on Android but it does show up on iOS. Am I missing some additional Android setup.

[mastermoo]

It should work on both platforms, without any additional setup. On android there is a cropped shadow bug, but other than that it should work just like on iOS.Can you share some code?

[amyb87]

I am basically using the example in the repo:
It is imported at the top of the file.
<View style={{flex:1, backgroundColor: '#F77c00'}}> {/*Rest of App come ABOVE the action button component!*/} <ActionButton buttonColor="#F77C00"> <ActionButton.Item buttonColor='#149BE0' title="Add New Card" onPress={() => this.toggleForm()}> <Icon name="credit-card" style={styles.actionButtonIcon} /> </ActionButton.Item> </ActionButton> </View>
I can see it on the iOS simulator. I saw someone said they couldn't see it in the debug mode, so I produced the apk for debug mode and release but I couldn't see anything on the android apk builds.

[amyb87]

I was able to get the fabs to show up on android by adding a height to the view but it does not position itself above the other view above it in the code.

[mastermoo]

exactly. this component needs to be placed in the root of your app :)

[efstathiosntonas]

@mastermoo Sorry for digging this old issue, i have the same problem, ios is working fine, on android it wont work on debug nor release (signed or not).

I have actionbutton inside a View and it's down at the bottom of the code.

[isAlmogK]

Same issue on my end has anyone gotten this working?

[0xpatrickdev]

I got it working on Android after moving it closer the root of my app, right beneath the AppNavigator. I thought I would be ok putting it at the root of View in the StackNavigator, but that was not the case for some reason. Using the example from the react-navigation docs:

import { addNavigationHelpers } from 'react-navigation';

const AppNavigator = StackNavigator(AppRouteConfigs);

const initialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('Login'));

const navReducer = (state = initialState, action) => {
  const nextState = AppNavigator.router.getStateForAction(action, state);

  // Simply return the original `state` if `nextState` is null or undefined.
  return nextState || state;
};

const appReducer = combineReducers({
  nav: navReducer,
  ...
});

class App extends React.Component {
  render() {
    return (
      <AppNavigator navigation={addNavigationHelpers({
        dispatch: this.props.dispatch,
        state: this.props.nav,
      })} />
    );
  }
}

const mapStateToProps = (state) => ({
  nav: state.nav
});

const AppWithNavigationState = connect(mapStateToProps)(App);

const store = createStore(appReducer);

class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppWithNavigationState />
      </Provider>
    );
  }
}

becomes: (abridged)

class App extends React.Component {
  render() {
    return (
      <View style={{display: 'flex', flex: 1}}>
        <AppNavigator navigation={addNavigationHelpers({
          dispatch: this.props.dispatch,
          state: this.props.nav,
        })} />
        <MyActionButton />
      </View>
    );
  }
}

where MyActionButton is a wrapper for react-native-action-button that is not wrapped in a View:

const MyActionButton = (props) => 
  <ActionButton
    ...some props
    >
    { props.actionItems.map((x, i) =>
      <ActionButton.Item
        index={i}
        buttonColor={x.color}
        title={x.title}
        onPress={() => props.dispatch({ type: 'ACTION_BUTTON_PRESSED', payload: x.action })}
        >
        <Icon name={x.iconName} size={20} color={x.iconColor} />
      </ActionButton.Item>
    )}
  </ActionButton>