diff --git a/README.md b/README.md index d7b6656..aae8834 100644 --- a/README.md +++ b/README.md @@ -60,8 +60,11 @@ export default class App extends Component { TextAlign={"left"} LetterSpacing={0} FontSize={15} + FontVariant=["small-caps"] + TextDecorationLine="none" isDraggable={true} isResizable={true} + Rotation={0} TopRightAction={()=>console.log("-Top Right Pressed")} centerPress={()=>console.log("-Center Pressed")} onTextChanged={(text)=>console.log("Text contents =", text)} @@ -96,23 +99,32 @@ export default class App extends Component { |onResizeEnd| - | function | Resize End event handler | | TopLeftIcon| `./icons/compassed.png`| function | Clickable Top Left Icon Function Component | | TopRightIcon | `./icons/closed.png`| function | Clickable Top Right Icon Function Component | - |text | `Lorem Ipsum...` | String | Value of text | + |PlaceHolder | `Lorem Ipsum...` | String | Value of text | |FontFamily | `Roboto` | String|Font Family| |FontColor | `#000` | String | Text Color| |FontSize | `15` | String|Font Size| + |FontVariant | `[]` | Array of enum|Font Variation, read more here https://reactnative.dev/docs/text-style-props#fontvariant| |LetterSpacing | `0` | String|Letter Spacing| |BackgroundColor | `transparent` | String|Background Color| |TextAlign | `Roboto` | String|Text Align| + |TextDecorationLine | `none` | String|Text Decoration Lines enum('none', 'underline', 'line-through', 'underline line-through')| |LineHeight | `18` | String|Line Height| | x | `80` | String|X location of Components| |y | `150` | String| Y location of Components| |w | `200` | Number| First Width | |h | `200` | Number| First Height | + |Rotation | `0` | Number| Rotation of the text. As react-native still doesn't provide support for setting origin of tranform, you may face issue with rotation as the origin will be at the end of the text | |minWidth | `200` | Number| Minimum Width | |minHeight | `200` | Number| Minimum Height | ## Features +### - Tips + +Rotation of the text can be controlled with the help of https://github.com/software-mansion/react-native-gesture-handler . You need to update the number in degree with gestures. You can also follow an easier way to do this, for example, you may use a Slider component. + +Remember, `FontVariant` expects an array not a string. For more details, check the offcial blog of react-native. + #### - Performs(Visible) in Black and White Backgrounds

@@ -129,7 +141,7 @@ export default class App extends Component { - [ ] Performance Optimization (Code Duplicates etc.) - [ ] textID and textInAction Bug (Type Error) - [ ] Dynamic Border Management -- [ ] Add Rotation/Rotate Icon +- [x] Add Rotation/Rotate Icon - [ ] Add Center-Snap diff --git a/src/DragTextEditor.js b/src/DragTextEditor.js index a6c8c60..a13fa4e 100644 --- a/src/DragTextEditor.js +++ b/src/DragTextEditor.js @@ -456,6 +456,7 @@ childMR=()=>{ zIndex:10000, elevation:0.01, fontFamily: this.props.FontFamily, + fontVariant: this.props.FontVariant, color:this.props.FontColor, fontSize: this.props.FontSize, letterSpacing: this.props.LetterSpacing, @@ -467,6 +468,8 @@ childMR=()=>{ overflow: 'hidden', margin: 10, padding:5, + textDecorationLine: this.props.TextDecorationLine, + transform: [{ rotate: this.props.Rotation + 'deg'}] }} selectTextOnFocus={true} multiline={true} @@ -486,10 +489,13 @@ childMR=()=>{ textAlign: this.props.TextAlign,//'right', lineHeight: this.props.LineHeight, fontWeight: 'normal', + fontVariant: this.props.FontVariant, overflow: 'hidden', display: 'flex', margin: 10, padding:5, + textDecorationLine: this.props.TextDecorationLine, + transform: [{ rotate: this.props.Rotation + 'deg'}] }} > {this.state.text} @@ -573,7 +579,9 @@ TopRightAction:null, onResizeStart: null, onResize: null, onResizeEnd: null, - + FontVariant: [], + TextDecorationLine: 'none', + Rotation: 0 }; DragTextEditor.propTypes = { @@ -595,6 +603,7 @@ TopRightAction:PropTypes.func, TopLeftIcon:PropTypes.func, TopRightIcon:PropTypes.func, FontFamily:PropTypes.string, + FontVariant: PropTypes.array, LetterSpacing:PropTypes.number, FontColor:PropTypes.string, FontSize:PropTypes.number, @@ -610,4 +619,6 @@ TopRightAction:PropTypes.func, onResizeStart: PropTypes.func, onResize: PropTypes.func, onResizeEnd: PropTypes.func, + TextDecorationLine: PropTypes.string, + Rotation: PropTypes.number };