Fix/ renderSliderOption method (#1381)

* fix renderSliderOption

* set initial value to slider

Author: lidord-wix

demo/src/screens/ExampleScreenPresenter.js

@@ -107,7 +107,7 @@ export function renderColorOption(title,
 }
 
 export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, initial = 0, sliderText = ''}) {
-  const value = this.state[key];
+  const value = this.state[key] || initial;
   return (
     <View marginV-s2>
       <Text marginB-s1 text70M>
@@ -123,7 +123,7 @@ export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, ini
           step={step}
           onValueChange={value => this.setState({[key]: value})}
         />
-        <Text marginL-s4 text70>
+        <Text marginL-s4 text70 style={styles.text}>
           {sliderText}
           {value}
         </Text>
@@ -135,5 +135,8 @@ export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, ini
 const styles = StyleSheet.create({
   rowWrap: {
     flexWrap: 'wrap'
+  },
+  text: {
+    width: 30
   }
 });

demo/src/screens/componentScreens/ViewScreen.js

@@ -69,7 +69,7 @@ class ViewScreen extends Component {
             <View height={2} bg-grey60 marginB-20/>
             {renderBooleanOption.call(this, 'Row (parent)', 'useRow')}
             {renderBooleanOption.call(this, 'Flex (child)', 'shouldFlex')}
-            {renderSliderOption.call(this, 'BorderRadius(brXX)', 'borderRadius', {step: 10, min: 0, max: 60})}
+            {renderSliderOption.call(this, 'BorderRadius(brXX)', 'borderRadius', {step: 10, min: 0, max: 60, initial: 20})}
             {renderSliderOption.call(this, 'Padding(padding-XX)', 'padding', {step: 4, min: 0, max: 40})}
             {renderSliderOption.call(this, 'Margin(margin-XX)', 'margin', {step: 4, min: 0, max: 40})}
             {renderRadioGroup.call(this, 'Alignment (parent)', 'alignment', ALIGNMENTS, {isRow: true})}