Support for styled components

[rostgoat]

Styled components are great. Except I don't know how I can use them with custom RN components.

Example

Suppose I am using KeyboardAwareScrollView and I want to make it's styling reusable through styled components. SafeAreaView works fine but not KeyboardAwareScrollView

Currently I get an error when I do this:

const KeyboardAwareScrollView = styled.KeyboardAwareScrollView`
  flex: 1;
  justify-content: center;
  align-items: center;
`;

const SafeAreaView = styled.SafeAreaView`
  flex: 1;
  background-color: ${Colors.defaultWhite};
`;

const LoginScreen = ({ navigation }) => {
  const dispatch = useDispatch();

  return (
    <SafeAreaView keyboardShouldPersistTaps="handled">
      <KeyboardAwareScrollView
        extraHeight={200}>
        ...
      </KeyboardAwareScrollView>
    </SafeAreaView>
  );
};

I get this error

Error

Unhandled JS Exception: TypeError: _styledComponents.default.KeyboardAwareScrollView is not a function. (In '_styledComponents.default.KeyboardAwareScrollView(_templateObject())', '_styledComponents.default.KeyboardAwareScrollView' is undefined)

Anyone know a workaround?

[rhuankarlus]

Same problem here.

[alexandreh92]

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scrollview';

const MyAwareScrollView = styled(KeyboardAwareScrollView) /* your css */ ;