Add '_className' escape-hatch to Text and View

src/components/Image/index.js

@@ -189,10 +189,10 @@ class Image extends React.Component {
      */
     return (
       <View
+        _className='Image'
         accessibilityLabel={accessibilityLabel}
         accessibilityRole='img'
         accessible={accessible}
-        className={'Image'}
         component='div'
         style={{
           ...(styles.initial),

src/components/Text/index.js

@@ -24,6 +24,7 @@ const styles = {
 
 class Text extends React.Component {
   static propTypes = {
+    _className: PropTypes.string, // escape-hatch for code migrations
     accessibilityLabel: PropTypes.string,
     accessible: PropTypes.bool,
     children: PropTypes.any,
@@ -37,6 +38,7 @@ class Text extends React.Component {
   static stylePropTypes = TextStylePropTypes
 
   static defaultProps = {
+    _className: '',
     accessible: true,
     component: 'span',
     style: styles.initial
@@ -48,6 +50,7 @@ class Text extends React.Component {
 
   render() {
     const {
+      _className,
       accessibilityLabel,
       accessible,
       children,
@@ -59,6 +62,7 @@ class Text extends React.Component {
       ...other
     } = this.props
 
+    const className = `Text ${_className}`.trim()
     const resolvedStyle = pickProps(style, textStyleKeys)
 
     return (
@@ -67,11 +71,11 @@ class Text extends React.Component {
         aria-hidden={accessible ? null : true}
         aria-label={accessibilityLabel}
         children={children}
-        className={'Text'}
+        className={className}
         component={component}
         onClick={this._onPress.bind(this)}
         style={{
-          ...(styles.initial),
+          ...styles.initial,
           ...resolvedStyle,
           ...(numberOfLines === 1 && styles.singleLineStyle)
         }}

src/components/View/index.js

@@ -30,6 +30,7 @@ const styles = {
 
 class View extends React.Component {
   static propTypes = {
+    _className: PropTypes.string, // escape-hatch for code migrations
     accessibilityLabel: PropTypes.string,
     accessibilityLiveRegion: PropTypes.oneOf(['assertive', 'off', 'polite']),
     accessibilityRole: PropTypes.string,
@@ -44,6 +45,7 @@ class View extends React.Component {
   static stylePropTypes = ViewStylePropTypes
 
   static defaultProps = {
+    _className: '',
     accessible: true,
     component: 'div',
     style: styles.initial
@@ -51,6 +53,7 @@ class View extends React.Component {
 
   render() {
     const {
+      _className,
       accessibilityLabel,
       accessibilityLiveRegion,
       accessibilityRole,
@@ -61,6 +64,7 @@ class View extends React.Component {
       ...other
     } = this.props
 
+    const className = `View ${_className}`.trim()
     const pointerEventsStyle = pointerEvents && { pointerEvents }
     const resolvedStyle = pickProps(style, viewStyleKeys)
 
@@ -70,10 +74,10 @@ class View extends React.Component {
         aria-hidden={accessible ? null : true}
         aria-label={accessibilityLabel}
         aria-live={accessibilityLiveRegion}
-        className={'View'}
+        className={className}
         role={accessibilityRole}
         style={{
-          ...(styles.initial),
+          ...styles.initial,
           ...resolvedStyle,
           ...pointerEventsStyle
         }}