Error changing ActivityIndicator color

[phillipeaugusto]

I believe there is a bug when using the ActivityIndicator component, when using restyle the color does not change.

My Theme:

import {createTheme} from '@shopify/restyle';

const palette = {
  black1: '#101010',
  black2: '#2D2D2D',
  black3: '#585858',
  black4: '#9F9F9F',
  black5: '#CFCFCF',
  black6: '#E7E7E7',

  green1: '#4FAF5A',
  green2: '#84C78C',
  green3: '#B9DFBD',

  red1: '#E03F3F',
  red2: '#E97979',
  red3: '#F3B2B2',

  background: '#F1F1F1',
  white: '#FFFFFF',
};

export const theme = createTheme({
  colors: {
    ...palette,
    primary: palette.green1,
    primaryContrast: palette.white,
    background: palette.background,
    sucess: palette.green1,
    error: palette.red1,
  },
  spacing: {
    s4: 4,
    s8: 8,
    s12: 12,
    s16: 16,
    s20: 20,
    s24: 24,
    s32: 32,
    s40: 40,
  },
  textVariants: {
    defaults: {},
  },
  borderRadii: {
    br4: 4,
    br8: 8,
    br12: 12,
    br16: 16,
    br20: 20,
    br24: 24,
    br32: 32,
    br40: 40,
  },
});

export type Theme = typeof theme;

Component:

import {
  createRestyleComponent,
  BackgroundColorProps,
  SpacingProps,
  spacing,
  ColorProps,
} from '@shopify/restyle';

import {
  ActivityIndicatorProps as RNActivityIndicatorProps,
  ActivityIndicator as RNActivityIndicator,
} from 'react-native';
import {theme, Theme} from '../../theme/theme';

interface ActIndiProps extends RNActivityIndicatorProps {
}

type ActivityIndicatorProps = BackgroundColorProps<Theme> &
  ColorProps<Theme> &
  SpacingProps<Theme> &
  ActIndiProps;

export const ActivityIndicator = createRestyleComponent<
  ActivityIndicatorProps,
  Theme
>([spacing], ({color, ...rest}: ActivityIndicatorProps) => {
  return <RNActivityIndicator {...rest} color={color} />;
});

Example usage:

function App() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState(false);

  return (
    <ThemeProvider theme={theme}>
      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
        <SafeAreaView style={{flex: 1}}>
          <View
            style={{
              flex: 1,
              paddingHorizontal: 24,
            }}>
            <ActivityIndicator color="green1" size="large" />
          </View>
        </SafeAreaView>
      </TouchableWithoutFeedback>
    </ThemeProvider>
  );
}

export default App;