How to add to existing StyleSheet in ReactNative. How to use spread operator with StyleSheet?

Referencing the StyleSheet defined style directly works. However, using the spread operator on the StyleSheet defined style completely ignores the styles defined in the StyleSheet.

As shown in the below code example

Does not work:

{...MyCommonStyles.outerExampleView, alignItems:'flex-end'}  

While the exact reference works:

 <View style={MyCommonStyles.outerExampleView}>  

import * as React from 'react';  import { Text, View, StyleSheet } from 'react-native';    interface StyleIssueScreenProps {  }    export const MyCommonStyles = StyleSheet.create({      outerExampleView: {          borderColor: 'orange',          borderWidth: 3      }  });    export class StyleIssueScreen extends React.Component<StyleIssueScreenProps> {      render() {          return <View>              <View style={MyCommonStyles.outerExampleView}>                  <Text>{'Works with exact ref'}</Text>              </View>              <View style=>                  <Text>{'Does not work with span expansion'}</Text>              </View>          </View>      }  }      export default function App() {    return (      <View>          <StyleIssueScreen/>      </View>    );  }  

Code: https://snack.expo.io/1u9R_ZkTa

https://stackoverflow.com/questions/65785339/how-to-add-to-existing-stylesheet-in-reactnative-how-to-use-spread-operator-wit January 19, 2021 at 12:07PM