Quick refactoring of inline JS to styles object?

I am working on a React Native project. Many of the components in the project use inline styles.

<Flex style={{ paddingBottom: 2, paddingLeft: 2, }} direction="column">
  <Flex.Item>
    <Text style={{ color: 'white', marginRight: 10 }}>
      {this.state.login.name}
    </Text>
  </Flex.Item>
  <Flex.Item>
    <Text style={{ color: 'white', fontWeight: 'bold' }}>
      £{this.state.login.accountBalance}
    </Text>
  </Flex.Item>
</Flex>

I want to refactor these inline styles into my `styles` `StyleSheet` object which is in the same file as the component.

const styles: any = StyleSheet.create({
  selection: {
    fontSize: 12,
    textAlign: "center"
  },
  container: {
    flex: 1,
    backgroundColor: "#fff",
    flexDirection: "column",
    alignSelf: "stretch",
    alignItems: "stretch"
  },
  user: {
    textAlign: "center",
    color: "#FFFFFF",
    marginBottom: 2,
    fontSize: 16,
    padding: 2,
    right: 5
  }
});

My current process of doing this is to create a new object key, copy the inline styles over, then refer to the key in the component render.

Because of WebStorm's capabilities with refactoring things into methods/variables etc, I am wondering, is there a quick/automated way of accomplishing this refactoring task?