score:1

JSX is an extension to javascript commonly used by react applications. It looks similar to html tags, with angle brackets at the start and end of elements, and properties on those elements. If you want to put normal javascript inside of JSX, you can do so by using curly brackets. You've got examples of that, such as this one, which has some JSX for the View, then switches back to javascript to pass in styles.layouts:

<View style={styles.layouts}>

You're getting an error because you put javascript code in a random spot, without using curly brackets. Leaving out some of the extra stuff, you wrote:

<TextInput var a = require ("react-native-fs");

Which isn't valid JSX, since you didn't use curly brackets to switch back to javascript. Furthermore, this isn't the right spot to be doing asynchronous stuff, such as writing to a disk. The render method is a synchronous block of code which takes the current state of the component, and returns a description of what you want the screen to look like.

Where to put this code depends on what you're trying to do. If this is something you want to happen when the component is first created, then you'll want to put the code in componentDidMount, which is a function that react components can have to let them run code when they are first mounted. For example:

import fs from 'react-native-fs';

export default class Component1 extends React.Component {
  componentDidMount() {
    var path = fs.DocumentDirectoryPath + '../textfile.txt';
    fs.writeFile(path, this.state.textInputValue, 'utf8')
        .then((success) => {
            console.log('File Written');
            // Possibly call this.setState if you want Component1 to render with something different now that the write is complete
        })
  }

  render() {
    // similar render to before, but without the file system code
  }
}

Or if this code is supposed to be run when they click a button, you might do it something like this:

onButtonPressed() {
    var path = fs.DocumentDirectoryPath + '../textfile.txt';
    fs.writeFile(path, this.state.textInputValue, 'utf8')
    //etc
}

render() {
  return (
    // other components omitted for brevity
    <Button onPress={() => this.onButtonPressed()}/>
  )
}

Related Query

More Query from same tag