use StyleProp for all style props

budiadiono · Sep 25, 2018 · 011cbb8 · 011cbb8
1 parent e35debe
commit 011cbb8
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/src/Calculator.tsx b/src/Calculator.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react'
-import { LayoutRectangle, StyleSheet, View, ViewStyle } from 'react-native'
+import {
+  LayoutRectangle,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle
+} from 'react-native'
 import { Button } from './Button'
 import { Display } from './Display'
 import { CalculatorCommonProps, DefaultCommonProps } from './interface'
@@ -29,7 +35,7 @@ export interface CalculatorProps extends CalculatorCommonProps {
   /**
    * Container style.
    */
-  style?: ViewStyle
+  style?: StyleProp<ViewStyle>
 
   /**
    * Calculate button click event.

diff --git a/src/CalculatorInput.tsx b/src/CalculatorInput.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import {
   Dimensions,
   Modal,
+  StyleProp,
   StyleSheet,
   Text,
   TextStyle,
@@ -38,17 +39,17 @@ export interface CalculatorInputProps extends CalculatorCommonProps {
   /**
    * Style of modal backdrop.
    */
-  modalBackdropStyle?: ViewStyle
+  modalBackdropStyle?: StyleProp<ViewStyle>
 
   /**
    * Text field container style.
    */
-  fieldContainerStyle?: ViewStyle
+  fieldContainerStyle?: StyleProp<ViewStyle>
 
   /**
    * Text style.
    */
-  fieldTextStyle?: TextStyle
+  fieldTextStyle?: StyleProp<TextStyle>
 
   /**
    * Prefix text.

diff --git a/src/Display.tsx b/src/Display.tsx
@@ -3,6 +3,7 @@ import {
   findNodeHandle,
   NativeModules,
   Platform,
+  StyleProp,
   StyleSheet,
   Text,
   TextStyle,
@@ -24,7 +25,7 @@ export interface DisplayProps {
   height: number
   width: number
   value: string
-  style: TextStyle
+  style: StyleProp<TextStyle>
 }
 
 export class Display extends React.Component<DisplayProps, State> {
@@ -132,6 +133,7 @@ export class Display extends React.Component<DisplayProps, State> {
               fontSize: height,
               height,
               lineHeight: height,
+              // @ts-ignore
               color: style.color
             }
           ]}
@@ -163,6 +165,7 @@ export class Display extends React.Component<DisplayProps, State> {
               fontSize: fixSize,
               height,
               top: (height - fontHeight) / 2,
+              // @ts-ignore
               color: ready ? style.color : 'transparent'
             }
           ]}