Error with stock Select component

Describe the bug I get this error when just using the basic example on RN 0.62

To Reproduce It appears fine on the screen at first. The error only appears once the component is clicked/selected.

Relevant code (copied from the docs)

<View style={[styles.content, { backgroundColor: theme.secondary, borderColor: theme.accent }]}>
        <Select
          label={'Select'}
          menuItems={[
            { id: 1, name: 'one' },
            { id: 2, name: 'two' }
          ]}
          onSelect={value => setSelectedItem({ selectedItem: value.name })}
          selectedItem={selectedItem}
          textFieldProps={{
            leadingIcon: (
              <Icon name={'date-range'} size={24} color={'#6e6e6e'} />
            ),
          }}
        />
        <Select
          label={'Select'}
          type={'filled'}
          menuItems={[
            { id: 1, name: 'one' },
            { id: 2, name: 'two' }
          ]}
          onSelect={value => setSelectedItem({ selectedItemTwo: value.name })}
          selectedItem={selectedItemTwo}
          textFieldProps={{
            leadingIcon: (
              <Icon name={'date-range'} size={24} color={'#6e6e6e'} />
            ),
          }}
        />
        <Select
          label={'Select'}
          type={'outlined'}
          menuItems={[
            { id: 1, name: 'one' },
            { id: 2, name: 'two' }
          ]}
          onSelect={value => setSelectedItem({ selectedItemThree: value.name })}
          selectedItem={selectedItemThree}
          textFieldProps={{
            leadingIcon: (
              <Icon name={'date-range'} size={24} color={'#6e6e6e'} />
            ),
          }}
        />
      </View>

Error: Style property 'fontSize' is not supported by native animated module

This error is located at:
    in TextFieldLabel (at withTheme.js:11)
    in _class (at TextFieldFlat.js:174)
    in RCTView (at TextFieldFlat.js:167)
    in TextFieldFlat (at withTheme.js:11)
    in _class (at TextField.js:64)
    in TextField (at withTheme.js:11)
    in _class (at Select.js:112)
    in RCTView (at Select.js:111)
    in RCTView (at TouchableHighlight.js:297)
    in TouchableHighlight (at TouchableHighlight.js:381)
    in ForwardRef (at Select.js:103)
    in RCTView (at Menu.js:223)
    in RCTView (at Menu.js:222)
    in Menu (at withTheme.js:11)
    in _class (at Select.js:90)
    in Select (at withTheme.js:11)
    in _class (at SettingsScreen.js:32)
    in RCTView (at SettingsScreen.js:31)
    in RNCSafeAreaView (at SettingsScreen.js:20)
    in SettingsScreen (at SceneView.tsx:122)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:115)
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:150)
    in RCTView (at CardContainer.tsx:219)
    in RCTView (at CardContainer.tsx:218)
    in RCTView (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:562)
    in RCTView (at createAnimatedComponent.js:144)
    in AnimatedComponent (at createAnimatedComponent.js:194)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
    in PanGestureHandler (at GestureHandler.native.tsx:13)
    in PanGestureHandler (at Card.tsx:538)
    in RCTView (at createAnimatedComponent.js:144)
    in AnimatedComponent (at createAnimatedComponent.js:194)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:534)
    in RCTView (at Card.tsx:528)
    in Card (at CardContainer.tsx:187)
    in CardContainer (at CardStack.tsx:558)
    in RCTView (at Screens.tsx:70)
    in MaybeScreen (at CardStack.tsx:551)
    in RCTView (at Screens.tsx:48)
    in MaybeScreenContainer (at CardStack.tsx:461)
    in CardStack (at StackView.tsx:458)
    in KeyboardManager (at StackView.tsx:456)
    in SafeAreaProviderCompat (at StackView.tsx:453)
    in RCTView (at StackView.tsx:452)
    in StackView (at createStackNavigator.tsx:82)
    in StackNavigator (at App.js:35)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:390)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in ForwardRef(NavigationContainer) (at App.js:34)
    in Root (at App.js:58)
    in Provider (at App.js:57)
    in Provider (at App.js:56)
    in Provider (at App.js:55)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
    in SafeAreaProvider (at App.js:54)
    in App (at renderApplication.js:45)
    in RCTView (at AppContainer.js:109)
    in RCTView (at AppContainer.js:135)
    in AppContainer (at renderApplication.js:39)

validateStyles
    NativeAnimatedHelper.js:248:12
__getNativeConfig
    AnimatedStyle.js:119:4
__getNativeTag
    AnimatedNode.js:167:8
__getNativeConfig
    AnimatedProps.js:166:31
__getNativeTag
    AnimatedNode.js:167:8
__connectAnimatedView
    AnimatedProps.js:130:6
__makeNative
    AnimatedProps.js:105:8
__makeNative
    AnimatedWithChildren.js:28:8
__makeNative
    AnimatedStyle.js:105:4
__makeNative
    AnimatedWithChildren.js:28:8
__makeNative
    AnimatedInterpolation.js:330:4
__makeNative
    AnimatedWithChildren.js:28:8
__makeNative
    AnimatedInterpolation.js:329:4
__makeNative
    AnimatedStyle.js:102:8
__makeNative
    AnimatedWithChildren.js:28:8
__makeNative
    AnimatedTransform.js:34:4
__makeNative
    AnimatedWithChildren.js:28:8
__startNativeAnimation
    Animation.js:62:4
start
    TimingAnimation.js:115:10
start
    TimingAnimation.js:126:11
animate
    AnimatedValue.js:206:4
start
    AnimatedImplementation.js:210:6
start
    AnimatedImplementation.js:217:13
animations.forEach$argument_0
    AnimatedImplementation.js:383:10
forEach
    [native code]:0
result.start
    AnimatedImplementation.js:365:6
_handleLabelAnimation
    TextFieldLabel.js:1:4024
componentDidUpdate
    TextFieldLabel.js:1:2938
commitLifeCycles
    ReactNativeRenderer-dev.js:18169:10
commitLayoutEffects
    ReactNativeRenderer-dev.js:21528:22
invokeGuardedCallbackImpl
    ReactNativeRenderer-dev.js:286:4
invokeGuardedCallback
    ReactNativeRenderer-dev.js:497:2
commitRootImpl
    ReactNativeRenderer-dev.js:21267:29
commitRootImpl
    [native code]:0
unstable_runWithPriority
    scheduler.development.js:818:23
commitRoot
    ReactNativeRenderer-dev.js:21109:17
finishSyncRender
    ReactNativeRenderer-dev.js:20514:12
performSyncWorkOnRoot
    ReactNativeRenderer-dev.js:20493:24
performSyncWorkOnRoot
    [native code]:0
runWithPriority$argument_1
    ReactNativeRenderer-dev.js:5703:31
unstable_runWithPriority
    scheduler.development.js:818:23
flushSyncCallbackQueueImpl
    ReactNativeRenderer-dev.js:5698:21
flushSyncCallbackQueue
    ReactNativeRenderer-dev.js:5686:28
batchedUpdates$1
    ReactNativeRenderer-dev.js:20575:28
batchedUpdates
    ReactNativeRenderer-dev.js:2731:29
_receiveRootNodeIDEvent
    ReactNativeRenderer-dev.js:2834:16
receiveTouches
    ReactNativeRenderer-dev.js:2911:27
__callFunction
    MessageQueue.js:425:19
__guard$argument_0
    MessageQueue.js:112:6
__guard
    MessageQueue.js:373:10
callFunctionReturnFlushedQueue
    MessageQueue.js:111:4
callFunctionReturnFlushedQueue
    [native code]:0

Screenshots

[codypearce]

Fixed in #423

[codypearce]

@JakeHadley The issue probably still exists on master because the package points to the dist folder, you can see this in the package.json’s main property https://github.com/codypearce/material-bread/blob/master/package.json#L79. I pushed a new commit that includes the changes for the dist folder now if you want to try it.

Is there a good way I can try and experiment and fix this stuff and submit a PR? I don’t really know how to do work with these types of modules, what process you go through to actually run and test these.

I wrote a guide on how to get started contributing if you’re interested https://material-bread.org/contributing/library Essentially you need to clone the project, run npm i, then run one of the start scripts to run the storybook environment on the platform you want to test on Ios: react-native run-ios android: react-native run-android web: npm run storybook-web

This will open up a simulator or a web server with all the component stories

All the component code can be found in src/Components/[Component]. For example,

Appbar.js contains the component itself Appbar.stories.js contains the example components, variations that you see in the simulator Appbar.styles.js contains all styles for the component Appbar.test.js simple tests index.js just exports the component